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?
LVL 1
YarxAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.