Of Stack

jQuery implements methods that only allow input of numbers and decimal points

  • 2021-01-19 22:01:16
  • OfStack

This article illustrates an jQuery implementation that allows only digits and decimal points to be entered. To share with you for your reference, as follows: 


<!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>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Sample code: 
// Only numeric and are allowed .:<input type="text" name="test" id="test" onkeydown="checkKeyForFloat(this.value,event)" style="ime-mode: disabled" />
// Only numbers are allowed  :<input type="text" name="test2" id="test2" onkeydown="checkKeyForNum(this.value,event)" style="ime-mode: disabled" />
// Only numbers and decimal points are allowed 
function checkKeyForFloat(value, e) {
 var isOK = false;
 var key = window.event ? e.keyCode : e.which;
 if ((key > 95 && key < 106) || // On the keypad 0 to 9
 (key > 47 && key < 60) || // On the big keyboard 0 to 9
 (key == 110 && value.indexOf(".") < 0) || // On the keypad . And there was no input before .
 (key == 190 && value.indexOf(".") < 0) || // On the big keyboard . And there was no input before .
 key == 8 || key == 9 || key == 46 || key == 37 || key == 39 // It does not affect the use of the normal edit key (8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
) {
  isOK = true;
 } else {
  if (window.event) //IE
  {
   e.returnValue = false; //event.returnValue=false  The effect is the same .
  }
  else //Firefox
  {
   e.preventDefault();
  }
 }
 return isOK;
}
// Only numbers are allowed 
function checkKeyForInt(value, e) {
 var isOK = false;
 var key = window.event ? e.keyCode : e.which;
 if ((key > 95 && key < 106) || // On the keypad 0 to 9
 (key > 47 && key < 60) || // On the big keyboard 0 to 9
 key == 8 || key == 9 || key == 46 || key == 37 || key == 39 // It does not affect the use of the normal edit key (8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
) {
  isOK = true;
 } else {
  if (window.event) //IE
  {
   e.returnValue = false; //event.returnValue=false  The effect is the same .
  }
  else //Firefox
  {
   e.preventDefault();
  }
 }
 return isOK;
}
// Custom properties are set  dtype  The text box   The range of allowed inputs 
function setDType() {
 $(":text[dtype]").each(function () {
  var dtype = $(this).attr("dtype");
  var isOK = true;
  switch (dtype) {
   case "number":
    $(this).css("ime-mode", "disabled").keydown(function (event) {
     isOK = checkKeyForFloat($(this).val(), event);
     if (!isOK) {
      //$(this).SuperFocus("", 500);
     }
     return isOK;
    });
    break;
   default:
    break;
  }
 });
}
</script>
<script type="text/javascript">
$(function () {
 setDType();
});
</script>
</head>
<body>
 age : <input type="text" maxlength="3" onkeydown="checkKeyForInt(this.value,event)" style="ime-mode: disabled"/><br />
 Height: <input type="text" maxlength="5" dtype="number" />
</body>
</html>

Readers who are interested in more jQuery related content can check out the special features of this site: jQuery Drag and drop effects and techniques summary, jQuery extension techniques summary, jQuery common classic effects summary, jQuery animation and effects usage summary, jquery selector method summary and jQuery common plugins and usage summary

I hope this article is helpful to jQuery program design.

Related articles: