Home > Web Front-end > Front-end Q&A > How to set jquery to only fill in numbers

How to set jquery to only fill in numbers

WBOY
Release: 2022-01-10 17:22:45
Original
3299 people have browsed it

In jquery, you can use the replace() method and regular expressions to set that only numbers can be filled in. The replace() method is used to replace a substring that matches the regular expression. When the filled content is not a number, it will not be filled in. Display, the syntax is "specify element object.val().replace(/[^\d]/g,"")".

How to set jquery to only fill in numbers

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

How to set jquery to only fill in numbers

Some input text boxes need to make some judgments. Only numbers can be entered. This judgment can be passed Regular expressions are used to judge. When the content entered by the user is not a number, it will not be displayed in the input text box. Let us take a look at how jq can set only numbers to be entered.

Syntax:

$('input').on('input propertychange', function(e) {
var text = $(this).val().replace(/[^\d]/g, "");
$(this).val(text)   
})
Copy after login

Create a new html file.

Create an input box on the html file, and then set the size of the input box.

Code:

Introduce the jquery.min.js file.

Code:

Use regular expressions to determine users Every time you enter content, it will not be displayed if it is not a number.

Code:

<script>
$(function(){
$(&amp;#39;input&amp;#39;).on(&amp;#39;input propertychange&amp;#39;, function(e) {
var text = $(this).val().replace(/[^\d]/g, &quot;&quot;);
$(this).val(text)   
})
})
</script>
Copy after login

Picture:

How to set jquery to only fill in numbers

After saving the html file, open it in a suitable browser for testing, and it is found that the input is not a number The content cannot be displayed on the text box. As shown in the picture:

How to set jquery to only fill in numbers

# Just copy and paste all the code into the new html file, and you can see the effect after saving.

All codes:







<script>
$(function(){
$(&amp;#39;input&amp;#39;).on(&amp;#39;input propertychange&amp;#39;, function(e) {
var text = $(this).val().replace(/[^\d]/g, &quot;&quot;);
$(this).val(text)   
})
})
</script>




Copy after login

Recommended related video tutorials: jQuery video tutorial

The above is the detailed content of How to set jquery to only fill in numbers. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template