HTML text input allows only numeric input

Is there a quick way to set an HTML text input (<input type=text />) to only allow numeric keystrokes (plus '.')?

Text Copied From stackoverflow.com
on : Thu, Jan 22, 2009 Views : 1323580

Accepted Answer

JavaScript (the most reliable still)

While this is simple, it will not let you use combination keys and other non-typeable keys. For a complete JavaScript solution that also supports input of type number and max length validation, consider using this Polyfill.

HTML 5 with <!DOCTYPE html> has native solution:

<input type=number>

Beware that it does not behave in a standard way in some browsers.

Try input type=number to see the HTML5 version in action.

See also https://github.com/jonstipe/number-polyfill for transparent support in older browsers.

jQuery

$(document).ready(
function() 
{

  $(#txtboxToFilter).keydown(
function (e) 
{

 
  
// Allow: backspace, delete, tab, escape, enter and .
 
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
 
 
   
// Allow: Ctrl/cmd+A
 
 
  (e.keyCode == 65 &
&
 (e.ctrlKey === true || e.metaKey === true)) ||
 
 
   
// Allow: Ctrl/cmd+C
 
 
  (e.keyCode == 67 &
&
 (e.ctrlKey === true || e.metaKey === true)) ||
 
 
   
// Allow: Ctrl/cmd+X
 
 
  (e.keyCode == 88 &
&
 (e.ctrlKey === true || e.metaKey === true)) ||
 
 
   
// Allow: home, end, left, right
 
 
  (e.keyCode >= 35 &
&
 e.keyCode <= 39)) 
{

 
 
 
   
// let it happen, don't do anything
 
 
 
   return;

 
  
}
 
  
// Ensure that it is a number and stop the keypress
 
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &
&
 (e.keyCode < 96 || e.keyCode > 105)) 
{

 
 
  e.preventDefault();

 
  
}
  
});
 
});
 

More complex validation options

If you want to do some other validation bits and pieces, this could be handy:

http://www.javascript-coder.com/html-form/javascript-form-validation.phtml https://github.com/lockevn/html-numeric-input

But don't forget you still must do server side validation!

for AZERTY keyboard:

jQuery



// Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
  
// Allow: Ctrl+A
  (e.keyCode == 65 &
&
 (e.ctrlKey === true || e.metaKey === true)) ||
  
// Allow: Ctrl+C
  (e.keyCode == 67 &
&
 (e.ctrlKey === true || e.metaKey === true)) ||
  
// Allow: Ctrl+X
  (e.keyCode == 88 &
&
 (e.ctrlKey === true || e.metaKey === true)) ||
  
// Allow: home, end, left, right
  (e.keyCode >= 35 &
&
 e.keyCode <= 39) ||
  
//Allow numbers and numbers + shift key
  ((e.shiftKey &
&
 (e.keyCode >= 48 &
&
 e.keyCode <= 57)) || (e.keyCode >= 96 &
&
 e.keyCode <= 105))) 
{

  
// let it happen, don't do anything
  return;
 

// Ensure that it is a number and stop the keypress if ((!e.shiftKey &
&
 (e.keyCode < 48 || e.keyCode > 57)) || (e.keyCode < 96 || e.keyCode > 105)) 
{

  e.preventDefault();
 
Text Copied From stackoverflow.com
on : Thu, Jan 22, 2009

Ask Question

If you want to ask question you must LogIn or SignUp
Login SignUp

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp