Log in

View Full Version : Focus/blur exception not working with keyboard script...


JAB Creations
03-30-2008, 11:13 AM
I'm trying to keep the backspace and spacebar keys from working except on forum elements (input[password/text] and select elements). I'm not interested in debating whether I should do this or not.

Any way the code below works half-ok but the focus/blur exception function isn't kicking in. I want to adjust the script so that you can use the backspace and spacebar on the form elements I just mentioned. However when no form elements have focus pressing the spacebar should not emulate the pagedown key by scrolling down the page nor should the backspace key navigate back a page. These functions loose data in the scenario this script is needed for.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test page</title>
<script type="text/javascript">

function keyPressed(evt) {

var pkeysEnabled = true;
if (!pkeysEnabled) {return}
else {
window.onkeydown=function(e) {if (e.keyCode==8 || e.keyCode==32) {return false;}}
}


}//pkeys()


function pkeysinit() {
// Find all input fields we're interested in
var inputs = document.getElementsByTagName("input");
var selects = document.getElementsByTagName("select");
var texts = document.getElementsByTagName("textarea");
var tags = new Array();

// Push every element into tags
for (var i =0 ; inputs[ i]; i++) tags.push( inputs[ i]);
for (var s =0 ; selects[ s]; s++) tags.push( selects[ s]);
for (var t =0 ; texts[ t]; t++) tags.push( texts[ t]);

// Search all our input fields....
for( var t = 0; t < tags.length; t++) {
var tag = tags[ t]; // Make code a little more legible

// Check it's input text, or SELECT, or TEXTAREA
if( (tag.tagName == "input" && tag.type == "text") || (tag.tagName == "input" && tag.type == "password") || (tag.tagName == "select") || ( tag.tagName == "textarea")) {
addEvent( tag, "focus", powerKeysDisable); alert('focus');// Disable when active
addEvent( tag, "blur", powerKeysEnable); alert('blur');// Enable when not active
}
}

addEvent(document, "keydown", keyPressed);
}

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 start() {
pkeysinit();
}
window.onload = start;

</script>
</head>

<body>

<div style="background-color: #bbb; height: 4000px; width: 100%;">
<p>We want the spacebar to <b>not</b> act as pagedown but enable it to work in input[text/password] and select elements.
The same thing applies with the backspace key though we want to prevent it from acting as a back button.</p>
<form>
<fieldset>
<div><input size="22" type="text" value="123"></div>
<div><input size="22" type="text" value="backspace this"></div>
<div><input size="22" type="text" value="space_the_underscores"></div>
<div><input size="22" type="text" value=""></div>
</fieldset>
</form>
</div>

</body>
</html>
jackbenimble4
03-30-2008, 02:39 PM
The problem was that javascript is case sensitive. The property of tag.tagName was in all uppercase and you were comparing it to lowercase. I went ahead and fixed that (I used the nodeName property but it really doesn't matter which you use), and got the script working. Here's the finished source code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test page</title>
<script type="text/javascript">

function keyPressed(evt) {

var pkeysEnabled = true;
if (!pkeysEnabled) {
return;
}
else if(document._powerKeysEnabled == true) {
// the focus is NOT on a form element
if (evt.keyCode==8 || evt.keyCode==32) {
// don't allow backspaces or spacebars
evt.preventDefault();
return false;
}
}


}//pkeys()


function pkeysinit() {
// Find all input fields we're interested in
var inputs = document.getElementsByTagName("input");
var selects = document.getElementsByTagName("select");
var texts = document.getElementsByTagName("textarea");
var tags = new Array();

// Push every element into tags
for (var i =0 ; inputs[ i]; i++) tags.push( inputs[i]);
for (var s =0 ; selects[ s]; s++) tags.push( selects[ s]);
for (var t =0 ; texts[ t]; t++) tags.push( texts[ t]);

// Search all our input fields....
for( var t = 0; t < tags.length; t++) {
var tag = tags[ t]; // Make code a little more legible

var nodeName = tag.nodeName.toLowerCase();
var type = tag.type.toLowerCase();
// Check it's input text, or SELECT, or TEXTAREA
if( (nodeName == "input" && type == "text") || (nodeName == "input" && type == "password") || (nodeName == "select") || ( nodeName == "textarea")) {
addEvent( tag, "focus", powerKeysDisable); // Disable when active
addEvent( tag, "blur", powerKeysEnable); // Enable when not active
}
}

addEvent(document, "keydown", keyPressed);
// start off ._powerKeysEnabled at true
document._powerKeysEnabled = true;
}

function powerKeysDisable(e) {
// a form element has the focus
document._powerKeysEnabled = false;
}

function powerKeysEnable(e) {
// a form element lost the focus, so we're no where right now
document._powerKeysEnabled = true;
}

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 start() {
pkeysinit();
}
window.onload = start;

</script>
</head>

<body>

<div style="background-color: #bbb; height: 4000px; width: 100%;">
<p>We want the spacebar to <b>not</b> act as pagedown but enable it to work in input[text/password] and select elements.
The same thing applies with the backspace key though we want to prevent it from acting as a back button.</p>
<form>
<fieldset>
<div><input size="22" type="text" value="123"></div>
<div><input size="22" type="text" value="backspace this"></div>
<div><input size="22" type="text" value="space_the_underscores"></div>
<div><input size="22" type="text" value=""></div>
</fieldset>
</form>
</div>

</body>
</html>
JAB Creations
03-30-2008, 02:43 PM
Thank you Jack! :D