Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1721
  • Last Modified:

onkeypress not recognising the backspace key??

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
Yarx
Asked:
Yarx
  • 5
  • 5
1 Solution
 
lil_puffballCommented:
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
 
lil_puffballCommented:
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
 
YarxAuthor Commented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
YarxAuthor Commented:
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
 
YarxAuthor Commented:
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
 
lil_puffballCommented:
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
 
YarxAuthor Commented:
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
 
lil_puffballCommented:
No, in my browser it works perfectly. I am using IE6, how about you?
0
 
lil_puffballCommented:
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
 
YarxAuthor Commented:
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now