Results 1 to 3 of 3

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

  1. #1
    Join Date
    Dec 2007
    Location
    Stranded in Sarasota Florida
    Posts
    75
    Thanks
    7
    Thanked 2 Times in 2 Posts

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

    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>

  2. #2
    Join Date
    Aug 2007
    Location
    Ohio
    Posts
    79
    Thanks
    0
    Thanked 15 Times in 15 Posts

    Default

    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>

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

    JAB Creations (03-30-2008)

  4. #3
    Join Date
    Dec 2007
    Location
    Stranded in Sarasota Florida
    Posts
    75
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Cool

    Thank you Jack!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •