The problem
When a user presses the Backspace key on a page in Internet Explorer (IE) presses the back button, this is very frustrating when you have a form on the screen and accidently press backspace. And loose your page.
I watched one of my users enter data on a form, but was correcting some data in a text box and pressed backspace once too many times, and IE when BACK!!
Firefox is much better (at least it does not do a BACK on a text input), but it does do a back on other fields (e.g. a select)
The fix
Trap the onkeydown to ignore backspace. The code below also disables Enter unless on the Submit button
The Code
<script type="text/javascript">
// Trap Backspace(8) and Enter(13) -
// Except bksp on text/textareas, enter on textarea/submit
if (typeof window.event != 'undefined') // IE
document.onkeydown = function() // IE
{
var t=event.srcElement.type;
var kc=event.keyCode;
return ((kc != 8 && kc != 13) || ( t == 'text' && kc != 13 ) ||
(t == 'textarea') || ( t == 'submit' && kc == 13))
}
else
document.onkeypress = function(e) // FireFox/Others
{
var t=e.target.type;
var kc=e.keyCode;
if ((kc != 8 && kc != 13) || ( t == 'text' && kc != 13 ) ||
(t == 'textarea') || ( t == 'submit' && kc == 13))
return true
else {
alert('Sorry Backspace/Enter is not allowed here'); // Demo code
return false
}
}
</script>
FireFox Fix
You can disable the backspace action in firefox by going to "about:config" and changing "browser.backspace_action" to something other than "0" or "1", e.g. "2"
8 comments:
Just wondering,
why do you need to trap the enter code key ?
You need to add t == 'password' to the exclusions, or you can't backspace in password inputs.
Other than that, thanks a lot for a great script.
We did some usability testing, and I couldn't believe how many users regularly mis-key on backspace and don't understand what happened, especially when they get 'Page has Expired' on a form and think the website is broken. This is a big help.
Thank you for the tip! It works very well.
I added the object "Flash" for forms.
(t == 'Flash')
Greetings!
Thanks for this piece of code. I need our users to fill out a form with keyboard only - no mouse. The esc key has also been causing trouble, so I extended the functionality to trap that.
// Trap Esc(27), Backspace(8) and Enter(13) -
// Except bksp on text/textareas/password, enter on textarea/submit/link
if (typeof window.event != 'undefined') // IE
document.onkeydown = function() // IE
{
var t=event.srcElement.type;
var kc=event.keyCode;
//alert('Type: ' + t);
return ((kc != 8 && kc != 13 && kc != 27) || (t == 'text' && kc != 13 && kc != 27) ||
(t == 'textarea' && kc != 27) || (t == 'button' && kc == 13) || (t == 'submit' && kc == 13) ||
(t == 'password' && kc != 27 && kc !=13) || (t == '' && kc == 13))
// Type = '' is what I get from the A HREF elements that need to remain functional in my form
}
else
document.onkeypress = function(e) // FireFox/Others
{
var t=e.target.type;
var kc=e.keyCode;
if ((kc != 8 && kc != 13 && kc != 27) || (t == 'text' && kc != 13 && kc != 27) ||
(t == 'textarea' && kc != 27) || (t == 'button' && kc == 13) || (t == 'submit' && kc == 13) ||
(t == 'password' && kc != 27 && kc !=13) || (t == '' && kc == 13))
// Type = '' is what I get from the A HREF elements that need to remain functional in my form
return true
else {
// alert('Sorry Backspace / Enter is not allowed here'); // Demo code
return false
}
}
Hello,
Thanks for the script.
I have used it in one of my applications by modifying a little bit.
I need the ENTER to submit the form but disable the backspace. So I found it useful.
Thanks again.
When the Wow Gold wolf finally found the wow gold cheap hole in the chimney he crawled cheap wow gold down and KERSPLASH right into that kettle of water and that was cheapest wow gold the end of his troubles with the big bad wolf.
game4power.
The next day the Buy Wow Goldlittle pig invited hisbuy gold wow mother over . She said "You see it is just as Cheapest wow goldI told you. The way to get along in the world is to do world of warcraft gold things as well as you can." Fortunately for that little pig, he buy cheap wow gold learned that lesson. And he just wow gold lived happily ever after!.
Thanks! just what i needed
I link Wow Power Leveling and wow power leveling wow power leveling
Post a Comment