How do I disable the space bar in a web form?

**dgreenhouse** · Mar 26 '11, 09:54 PM

The script right before the input field in question handles squelching the space bar.

(Clarification note: This squelches all space bar key-presses on the page.
If you have other input fields that require space bar key-presses
you'll need to determine which element caused the event
to be triggered in the function noted below.)

See:

Code:

<script type="text/javascript">
// I've added the comments below...
function kH(e) {

// Cross browser event object grabber...
var pK = e ? e.which : window.event.keyCode;

/**
 * If the key pressed isn't a space return true (which
 * tells the browser to perform the default action for a
 * keypress. If it is a space, return false which tells 
 * the browser to squelch the default action for a
 * keypress. (i.e. no key press shows up).
return pK != 32; 
}

/**
 * This sets up trapping key presses for this page.
 * Calls the function noted above for every keypress.
 */
document.onkeypress = kH;

// This is for old Netscape 4 browsers and can be removed
if (document.layers) document.captureEvents(Event.KEYPRESS);
</script>

**Atlante** · Mar 27 '11, 01:10 AM

Hey dgreenhouse, thanks for that reply, I searched for a way to eliminate the enter key and found that piece of code and switched the number from 13 to 32. I know this is the most unconventional way of doing it, so if by chance you may know how to modify it so that it only doesn't count the space bar, I'd gggreeeaaatttll lyyy appreciate your help!

Thanks again for the reply!

**dgreenhouse** · Mar 27 '11, 08:09 AM

With jQuery, this should work.
I don't know if it works in all browsers, but I've tested in:
IE8, FF 3, Chrome 10, and Safari 4

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Disable the space bar in a web form and count chars</title>
<style>
  #errormsg {color:red;}
</style>
<script type="text/javascript" src="../includes/jquery/jquery-1.5.1.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#myelem').bind('keyup', function(event) {
      // Update the character count
      $('#count').val($('#myelem').val().length);
      
      // Set maximum chars entered message if it has been reached
      var maxchars = parseInt($('#myelem').attr('maxlength'));
      var maxtext = $('#myelem').val().length == maxchars;
      $('#errormsg').text(!maxtext ? '' : 'A maximum of (' + maxchars + ') characters have been entered!');
    });

    /**
     * I found this to be needed to trap the space bar.
     * Binding on keyup only lets the space bar through
     * although the count still works.
     */	 
    $('#myelem').bind('keydown', function(event) {
      if (event.keyCode==32) {
        return false;
      }
    });
		
  });
</script>
</head>

<body>
<div id="mydiv">
<label for="myelem" >Enter some characters</label>
<input id="myelem" type="text" maxlength="10" /><br />
<label for="count"># chars entered</label>
<input id="count" type="text" />
<p id="errormsg"></p>
</div>
</body>
</html>

How do I disable the space bar in a web form?

How do I disable the space bar in a web form?

Comment

Comment

Comment