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.

HTML 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 {
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:

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!

Thread: Focus/blur exception not working with keyboard script...

Thread Tools

Search Thread

Focus/blur exception not working with keyboard script...

The Following User Says Thank You to jackbenimble4 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions