Thursday, May 31, 2007

How to: Disable Backspace key in IE and Firefox

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:

Anonymous said...

Just wondering,
why do you need to trap the enter code key ?

Anonymous said...

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.

Anonymous said...

Thank you for the tip! It works very well.
I added the object "Flash" for forms.

(t == 'Flash')

Greetings!

Wim said...

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

Anonymous said...

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.

Anonymous said...

Thanks! just what i needed

buy wow gold said...

WOW GOLD, nice blog. its worth reading. I liked it very much

Unknown said...

Can someone please post the code they used to disable the backspace key but leave the enter key intact?

Anonymous said...

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.

Anonymous said...

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)

Anonymous said...

Thank you, thank you, thank you!!!

Unknown said...

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

Unknown said...

buy wow gold

Good post

Murray Speight said...

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

Unknown said...

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

Unknown said...

oW Po

Nice post

Unknown said...

Thank you so much. Very nice and useful article.

Jaime Hablutzel said...

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

Unknown said...

Thanks a lot for sharing this post.



.....Alex


online viagra

Jerry T. said...

Excellent! Works very well for us in IE8.

Purvez said...

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

Purvez said...

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

Murray Speight said...

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

Unknown said...

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

rsmith506 said...

Thank you very much for writing all of the good info! I am looking forward to seeing more! How to Remove Bad Credit

Thomas Buckner said...

I agree.. I have tried several brands and I think that blu cigs are the best tasting and most realistic. Blu Cigarettes Reviews

Anonymous said...

I was interested know about it.
sex bondage videos

Archie Pavia said...

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

Ocie Folden said...

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.

Unknown said...


Nice Post Love Reading Its

Tadalis 20

kamagra 100mg

generic Viagra 100mg

silagra

Danny Danials said...

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.

Google