jQuery numerical input function that limits input to numbers and decimal points-JS Tutorial-php.cn

jQuery numerical input function that limits input to numbers and decimal points

WBOY

Release： 2024-02-25 14:21:22

Original

761 people have browsed it

jQuery numerical input function that limits input to numbers and decimal points

Title: Using jQuery to limit numerical input to numbers and decimal points

In web development, we often encounter the need to restrict users to only enter numbers in the input box. and decimal points. In order to achieve this function, you can use jQuery to realize the numerical limit of the input box. The following will introduce how to use jQuery to limit the input box to only numbers and decimal points, and provide specific code examples.

First, we need to introduce the jQuery library to ensure that jQuery is correctly introduced into the web page. Next, we can write the following jQuery code to implement numerical input restrictions:

<!DOCTYPE html>
<html>
<head>
    <title>数值输入限制为数字和小数点</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.numeric-input').on('input', function () {
                // 将输入框的值设为数字和小数点之外的字符替换为空
                $(this).val($(this).val().replace(/[^0-9.]/g, ''));
                
                // 确保只能输入一个小数点
                if ($(this).val().indexOf('.') !== $(this).val().lastIndexOf('.')) {
                    $(this).val($(this).val().slice(0, -1));
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" class="numeric-input" placeholder="只能输入数字和小数点">
</body>
</html>

Copy after login

In this code, we first use jQuery’s $(document).ready() method to Make sure the DOM has been loaded before executing the code. Next, we bound a listener for the input event to the input box with the numeric-input class. When the content in the input box changes, the event will be triggered.

In the event handler function, we use the regular expression /[^0-9.]/g to match all characters that are not numbers and decimal points and replace them with null. This implements the function of limiting the input of only numbers and decimal points. At the same time, we also added a logic to ensure that only one decimal point can be entered to prevent the user from entering multiple decimal points.

Through the above code examples, we can use jQuery to easily implement the function of limiting numerical input in the input box to numbers and decimal points, improving the accuracy and experience of user input.

The above is the detailed content of jQuery numerical input function that limits input to numbers and decimal points. For more information, please follow other related articles on the PHP Chinese website!