search

Home  >  Article  >  Web Front-end  >  Based on jQuery, the text box can only input numbers (decimals, integers)_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:20:041196browse

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>

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>

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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of AngularJS initialization static template_AngularJSNext article：Detailed explanation of AngularJS initialization static template_AngularJS

Related articles

See more