?
Solved

onkeypress not recognising the backspace key??

Posted on 2003-03-30
10
Medium Priority
?
1,720 Views
Last Modified: 2012-06-21
I've got a relatively simple piece of logic in javascript that updates the inner HTML of a div tag when text is typed into an textarea. It works fine except for the fact that the event does not fire when they hit backspace key. They can delete all of the text in the textarea and the preview that is supposed to reflect these changes does not update. I'm assuming there is not much I can do to force it to capture this key but is there a way to work around this to achieve the same basic results?
0
Comment
Question by:Yarx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8235481
I'm not quite sure what your code is right now so it's difficult to see the problem, but anyways try these codes:

If you call it by onKeyPress (i.e. <textarea onKeyPress="test(event.keycode)">) use this:

function test(key){
if(key==13){alert('backspace pressed')}
}


If you call it by onKeyDown (i.e. <textarea onKeyDown="test(event.keycode)">) use this:

function test(key){
if(key==8){alert('backspace pressed')}
}

Let me know how it's going.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8235485
Although a note, if you're just trying to update the innerHTML of a div all you may need is this:

<textarea onKeyUp="document.getElementById('div_id').innerHTML=this.value">

Replace div_id with the id of your div.
0
 
LVL 1

Author Comment

by:Yarx
ID: 8236129
I have it using onkeyup at the moment. It helps with the issue of it not picking up the bvackspace but it's one character behind. So if my text area is "Test", and I delete the t on the end, my preview still says "Test", If I delete the s my preview is "Tes". You get the idea. This is my code at the moment.

&lt;script lang="javascript"&gt;
function UpdatePreview()
{
     var SignaturePreviewString;
     SignaturePreviewString = document.getElementById("txtHeader").value;
     SignaturePreviewString = SignaturePreviewString + "Sample Post&lt;br&gt;------------------------------&lt;br&gt;";
     SignaturePreviewString = SignaturePreviewString + document.getElementById("txtFooter").value;
     document.getElementById("SignaturePreview").innerHTML = SignaturePreviewString;
}
&lt;/script&gt;

&lt;textarea name="txtHeader" rows=10 cols=75 onkeyup="javascript:UpdatePreview();" onkeydown="javascript:UpdatePreview();"&gt;&lt;/textarea&gt;

There is a second text area whish is used on the js function but it's the same as the first.

So now I have it lagging behind the input bu a character...

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Author Comment

by:Yarx
ID: 8236134
Oops, it does do the tags for me.... ah well. Here's what it should have looked like.

<script lang="javascript">
function UpdatePreview()
{
     var SignaturePreviewString;
     SignaturePreviewString = document.getElementById("txtHeader").value;
     SignaturePreviewString = SignaturePreviewString + "Sample Post<br>------------------------------<br>";
     SignaturePreviewString = SignaturePreviewString + document.getElementById("txtFooter").value;
     document.getElementById("SignaturePreview").innerHTML = SignaturePreviewString;
}
</script>

<textarea name="txtHeader" rows=10 cols=75 onkeyup="javascript:UpdatePreview();" onkeydown="javascript:UpdatePreview();" onblur="javascript:UpdatePreview();"></textarea>

0
 
LVL 1

Author Comment

by:Yarx
ID: 8236783
Oops, it does do the tags for me.... ah well. Here's what it should have looked like.

<script lang="javascript">
function UpdatePreview()
{
     var SignaturePreviewString;
     SignaturePreviewString = document.getElementById("txtHeader").value;
     SignaturePreviewString = SignaturePreviewString + "Sample Post<br>------------------------------<br>";
     SignaturePreviewString = SignaturePreviewString + document.getElementById("txtFooter").value;
     document.getElementById("SignaturePreview").innerHTML = SignaturePreviewString;
}
</script>

<textarea name="txtHeader" rows=10 cols=75 onkeyup="javascript:UpdatePreview();" onkeydown="javascript:UpdatePreview();" onblur="javascript:UpdatePreview();"></textarea>

0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 78 total points
ID: 8242346
Strange. THat code is working fine for me. Paste this:

<script
function UpdatePreview()
{
    var SPS = document.getElementById("txtHeader").value;
    document.getElementById("SignaturePreview").innerHTML = SPS;
}
</script>

<textarea name="txtHeader" rows=10 cols=75 onkeyup="javascript:UpdatePreview();" onkeydown="javascript:UpdatePreview();" onblur="javascript:UpdatePreview();"></textarea>

<br>
<span id=SignaturePreview></span>


It should work...
0
 
LVL 1

Author Comment

by:Yarx
ID: 8242475
Yes, it works, but it's delayed. Because the backspace key is only being captured by the onkeydown, not onkeyup. So when I press backspace it sets the text to the preview, and THEN deleted the letter from my text area. So the preview gets the text before the letter is removed. I suppose I could code a way around that. If I do a check in my update to see if the keycode is equal to the backspace I can remove the last character if it's not than just do a straight update. I wonder if it's just IE doing this??

Well thanks for the help regardless. I think that should achieve the same thing as I wanted even though it would have been nice to not have to code around the faults of the event.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8242696
No, in my browser it works perfectly. I am using IE6, how about you?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8242702
Anyways, if it isn't working, you could try something like this:

<textarea onKeyDown="if(event.keyCode==8){var txt=document.getElementById('id');txt.innerHTML=txt.innerHTML.substring(0,txt.innerHTML.length-1)}" onKeyUp="javascript:UpdatePreview();" onBlur="javascript:UpdatePreview();>
0
 
LVL 1

Author Comment

by:Yarx
ID: 8249302
I've got IE6 as well, Not sure what's causing mine to not work.

Great, I hadn't gotten around to actually changing the code to take off the last character yet, since I still have lots of other features to code. This is exactly what I needed. Thanks again for the help. Saves me the time of having to searh how to do it.

You know it's amazing, when ever I search google for a problem with my code 99% of the time I find the exact solution on this site. I swear this place is great. If it's a specific questions or an old one that's already been answered, it's one here some where. ^_^

0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question