Forum Moderators: open
You want to diable the backspace key, except typing in a text field.
Well, certainly you can detect the use of it, but I don't know if you can stop it going back a page. You understand though that the user can still press the back button?
If this is ok, I'll see if I can make a quick test page.
Note improper representation of ¦ character!
function keyPressed( evt) {
var e = evt ¦¦ event;
var key = e.which ¦¦ e.keyCode;
var ret = true;if( key == 8) ret = false;
return ret;
}function addEvent(elm, evType, fn, useCapture)
{
//Credit: Function written by Scott Andrews
//(slightly modified)
var ret = 0;if (elm.addEventListener)
ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent)
ret = elm.attachEvent('on' + evType, fn);
else
elm['on' + evType] = fn;return ret;
}addEvent( document, "keydown", keyPressed);
Copy that whole chunk of code above, stick it in a file called, for example, nobackspace.js
The name can be anything you like but has to have the extention js for Javascript.
The in your HTML, put this line in your <head>:
<script type='text/javascript' src='nobackspace.js'></script>
The src property is a relative file path, works the same way as your <img> tags.
When the browser finds that line, it'll download the script, and execute it immediately. Now, as everything we have is in functions, the only line that will be executed is the addEvent line at the bottom. This will call the addEvent function which attaches the keyPressed function to the onKeyDown event on document.
You see then it works automatically, without any need for any script in your html. This script is a bit of an anomoly, normally you'd begin with an onLoad event that runs an init funtion. This init function would then look up other elements, and assign events to them.
That code will work fine, but I haven't tested it with the input boxes. It may disable the backspace in here too, but you said you already had the code to correct this, so just work it into that little script.
Hope you understand how it works now!
Just ask if you need more info.
The init function then needs to find all INPUT/TEXTAREA fields using getElementsByTagName, and add an onfocus/onblur events again using addEvent. These events will call simple functions that set a flag (called bkspEnabled in this example) which the keyPressed function can check for, and return true instead.
Your enable/disable functions would be:
function bkspEnable() { bkspEnabled = true; } function bkspDisable() { bkspEnabled = false; } Your keyPressed function would have this line at the start of the function:
if( bkspEnabled) return true;
You see how that works?
Thanks...
function keyPressed( evt) {
var e = evt ¦¦ event;
var key = e.which ¦¦ e.keyCode;
var ret = true;
if(bkspEnabled) return true;
if(key==8) ret = false;
return ret;
}
function addEvent(elm, evType, fn, useCapture) {
//Credit: Function written by Scott Andrews
//(slightly modified)
var ret = 0;
if (elm.addEventListener) ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent) ret = elm.attachEvent('on' + evType, fn);
else elm['on' + evType] = fn;
return ret;
}
function bkspEnable() {
bkspEnabled = true;
}
function bkspDisable() {
bkspEnabled = false;
}
function init() {
var dlist = document.getElementsByTagName('INPUT');
alert('perform init()=' + dlist.length);
for( var i = 0; i < dlist.length; i++ ) {
alert(i);
dlist.item(i).onFocus=bkspEnable();
dlist.item(i).onBlur=bkspDisable();
}
}
addEvent(document, "keydown", keyPressed);
init();
Tweak it a bit....
function init() {
var dlist = document.getElementsByTagName('INPUT');
alert('perform init()=' + dlist.length);
for( var i = 0; i < dlist.length; i++ ) {
alert(i);
addEvent( dlist[i], "focus", bkspEnable);
addEvent( dlist[i], "blur", bkspDisable);
}
}addEvent(document, "keydown", keyPressed);
addEvent(window, "load", init);
By calling init() at the bottom of your script, the function was running straight away - before the browser had loaded the HTML with the <input> tags, so it was correct at the time of execution.
I've used addEvent to trigger the init function when the page has loaded, same as doing
<body onLoad='init()'>.
I've also changed your loop to assign the events by using addEvent. The importance of this is that the addEvent won't overwrite another event already assigned to the element. Whereas
elm.onFocus = this();will stop other functions attached to the focus event from running.