asked on

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?

lil_puffball

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.

lil_puffball

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.

Yarx

ASKER

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.

<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();"></textarea>

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...

Yarx

ASKER

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>

Yarx

ASKER

ASKER CERTIFIED SOLUTION

lil_puffball

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Yarx

ASKER

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.

lil_puffball

No, in my browser it works perfectly. I am using IE6, how about you?

lil_puffball

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();>

Yarx

ASKER

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. ^_^