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"
31 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.
Thanks! just what i needed
WOW GOLD, nice blog. its worth reading. I liked it very much
Can someone please post the code they used to disable the backspace key but leave the enter key intact?
It was extremely interesting for me to read the article. Thank you for it. I like such topics and everything that is connected to them. I would like to read a bit more on that blog soon.
My friend and I were recently discussing about the prevalence of technology in our day to day lives. Reading this post makes me think back to that debate we had, and just how inseparable from electronics we have all become.
I don't mean this in a bad way, of course! Ethical concerns aside... I just hope that as technology further develops, the possibility of copying our memories onto a digital medium becomes a true reality. It's one of the things I really wish I could see in my lifetime.
(Posted on Nintendo DS running [url=http://kwstar88.zoomshare.com/2.shtml]R4 SDHC[/url] DS FFOpera)
Thank you, thank you, thank you!!!
This is almost what I need. However, I need to distinguish readonly text boxes from non-readonly, otherwise the backspace is not trapped in readonly controls and the page goes back. I have tried several ways, including:
var ro=event.srcElement.type.readonly;
var ro=event.srcElement.readonly;
var ro=t.readonly;
Any suggestions?
Thanks.
Dan
buy wow gold
Good post
Hi Dan
I have updated the code to allow a attribute with a tag of enter_ok to allow enter. This may give you some ideas. Re-worked code below.
//========================================
// Disable Backspace key in IE and Firefox
//========================================
// Trap Backspace(8) and Enter(13) -
// Except bksp on text/textareas, enter on textarea/submit
document.onkeypress = function(event) {
if (typeof window.event != 'undefined') { // ie
event = window.event;
event.target = event.srcElement; // make ie confirm to standards !!
}
var kc=event.keyCode;
var tt=event.target.type;
if ((kc == 13) && (event.target.getAttribute('enter_ok') == 'true')) {
return true; // ok
}
// alert('kc='+kc+", tt="+tt);
if ((kc != 8 && kc != 13) || ((tt == 'text' || tt == 'password') && kc != 13) ||
(tt == 'textarea') || (tt == 'submit' && kc == 13))
return true;
alert('Bksp/Enter is not allowed here');
return false;
}
if (typeof window.event != 'undefined') // ie
document.onkeydown = document.onkeypress; // Trap bksp in ie. !! Note: does not trap enter, but onkeypress does !!
Thank you so much for your response. That was the hint I needed to get this working perfectly in both IE & Firefox.
Here is the code I ended up using, with some of my debugging alerts left in place but commented:
if (typeof window.event != 'undefined') { // IE
document.onkeydown = function()
{
var t=event.srcElement.type;
var kc=event.keyCode;
var tar=event.srcElement;
var ro=tar.getAttribute('readonly');
var r=(kc != 8 && kc != 13) || ( t == 'text' && kc != 13 && ro == false ) ||
(t == 'password') || (t == 'textarea' && ro == false ) ||
( t == 'submit' && kc == 13);
return r
}
}
else {
document.onkeypress = function(e) // Firefox
{
//alert('in firefox onkeypress'); // debug code
var t=e.target.type;
var kc=e.keyCode;
var tar=e.target;
//alert('tar: ' + tar); // debug code
var ro=tar.getAttribute('readonly');
//alert('ro: ' + ro); // debug code
var r=(kc != 8 && kc != 13) || ( t == 'text' && kc != 13 && ro != 'readonly' ) ||
(t == 'password') || (t == 'textarea' && ro != 'readonly' ) ||
( t == 'submit' && kc == 13);
//alert('r: ' + r); // debug code
return r
}
}
oW Po
Nice post
Thank you so much. Very nice and useful article.
thank you!, this is the best approach I have seen, in difference to the ones posted:
http://www.webmasterworld.com/forum91/4699.htm
http://www.tipstrs.com/tip/543/Disable-backspace-key-on-Firefox
Thanks a lot for sharing this post.
.....Alex
online viagra
Excellent! Works very well for us in IE8.
Hi Murray I've tried your code posted March 29, 2010 and I get the message saying Backspace and Return are not allowed here. But.... it then throws the page back to a previous site. Please can you tell me what I'm doing wrong?
Thanks very much
Purvez Desai
Hi Murray I've tried your code posted March 29, 2010 and I get the message saying Backspace and Return are not allowed here. But.... it then throws the page back to a previous site. Please can you tell me what I'm doing wrong?
Thanks very much
Purvez Desai
Here is my latest code. Hope this helps.
//========================================
// Disable Backspace key in IE and Firefox
//========================================
// Trap Backspace(8) and Enter(13) -
// Except bksp on text/textareas, enter on textarea/submit
document.onkeypress = function(event) {
if (typeof window.event != 'undefined') { // ie
event = window.event;
event.target = event.srcElement; // make ie confirm to standards !!
}
var kc=event.keyCode;
var tt=event.target.type;
if ((kc == 13) && (event.target.getAttribute('enter_ok') == 'true')) {
return true; // ok
}
// alert('kc='+kc+", tt="+tt);
if ((kc != 8 && kc != 13) || ((tt == 'text' || tt == 'password') && kc != 13) ||
(tt == 'textarea') || (tt == 'submit' && kc == 13))
return true;
alert('Bksp/Enter is not allowed here');
return false;
}
if (typeof window.event != 'undefined') // ie
document.onkeydown = document.onkeypress; // Trap bksp in ie. !! Note: does not trap enter, but onkeypress does !!
Oh my!!! You are just too true to be good. How do you manage to write and research on such wonderful things? You have inspired me to work harder now. I shall try as much as possible to enjoy life to the fullest and be satiated with the wonderful things that are around me, which I have been unaware of until now.
turbulence training ebook
Thank you very much for writing all of the good info! I am looking forward to seeing more! How to Remove Bad Credit
I agree.. I have tried several brands and I think that blu cigs are the best tasting and most realistic. Blu Cigarettes Reviews
I was interested know about it.
sex bondage videos
wow! this is a brilliant idea, great job. I really want to see such more posts in future. Just wanna say thanks for the information you have given here. -- cheap hotels downtown indianapolis
THE W HOTEL SAN FRANCISCO
Hey great post.. You do have some unique ideas here and I expect more articles from you.Thank you a lot for sharing this with us, really great post.
Nice Post Love Reading Its
Tadalis 20
kamagra 100mg
generic Viagra 100mg
silagra
I am thinking that in this time you should give a try to this new app Hangouts Apk : which is now most trending app in the world.
Post a Comment