Based on jQuery, the text box can only input numbers (decimals, integers)

Based on jQuery, the text box can only input numbers (decimals, integers)_jquery

WBOY

Release： 2016-05-16 15:20:04

Original

1216 people have browsed it

In actual applications, the text box sometimes only allows the input of integers, but sometimes it may be more "fraternal" and allows the input of floating point numbers. Let's introduce through example code how to implement using jquery. The text box can only enter decimals , the code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
}).bind("paste",function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

Copy after login

The above code meets our requirements. Only integers or floating point numbers can be entered in the text box. The code is relatively simple and I won’t introduce it here.

The following will introduce how to use jquery to realize that the text box can only input integers:

Sometimes it may be necessary to stipulate that the text box content can only input integers. Here is a code example that can realize this function for the reference of friends in need.

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/\D|^0/g,'')); 
}).bind("paste",function(){
$(this).val($(this).val().replace(/\D|^0/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

Copy after login

The above code achieves the expected requirements. Only integers can be entered in the text box. The following is an introduction to its implementation process.

Code comments:

1.$(function(){}), when the document structure is completely loaded, execute the code in the function.
2.$(".NumText").keyup(function(){}), register the keyup event processing function for the text box.
3.$(this).val($(this).val().replace(/D|^0/g,'')), use regular expressions through the replace() function to replace non-numeric content with empty .
4.bind("paste",function(){$(this).val($(this).val().replace(/D|^0/g,''));}), register paste event processing Vague, of course, chain calls are used here, which prevents users from copying and pasting using ctrl v.

The above code is relatively simple to write, and some difficult points are attached with comments. I believe it will be helpful to everyone.