JavaScript restricts the input box to only allow integers and decimal points (two methods)-JS Tutorial-php.cn

JavaScript restricts the input box to only allow integers and decimal points (two methods)

藏色散人

Release： 2021-08-26 14:22:50

Original

4216 people have browsed it

In the previous article "JavaScript How to Click to Delete an Extension and Get the File Name" I introduced to you how to click to delete the extension and get the file name through javascript. Friends in need can Go read and find out~

The theme of this article is to teach you how to use javascript to limit the input box to only allow integers and decimal points, and not allow the use of any other symbols.

Let me introduce two implementation methods to you:

The first method:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style="text-align:center;"
      id="body">

<h1 id="h1"
    style="color:#ff311f;">
    PHP中文网
</h1>
<p id="GFG_UP"
   style="font-size: 15px;
              font-weight: bold;">
</p>
<form>
    请输入内容:
    <input id="input"
           oninput="valid(this)"
           type="text">
</form>
<br>
<p id="GFG_DOWN"
   style="font-size: 23px;
              font-weight: bold;
              color: #ff311f; ">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML =
        "查看输入是否有效";
    var RegExp = new RegExp(/^\d*\.?\d*$/);
    var val = document.getElementById("input").value;

    function valid(elem) {
        if (RegExp.test(elem.value)) {
            val = elem.value;
            el_down.innerHTML = "输入的是有效字符";
        } else {
            elem.value = val;
            el_down.innerHTML = "输入的是无效字符";
        }
    }
</script>
</body>
</html>

Copy after login

The running results are as follows:

GIF 2021-8-26 星期四下午 2-15-40.gif

In the above code example:

RegExp is used to validate the input.
Every time a character is entered, the entire input is matched against a RegExp to check for validity.
If valid, the character is valid and added to the input, otherwise it is invalid.

Second method:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style="text-align:center;"
      id="body">
<h1 id="h1"
    style="color:orange;">
    PHP中文网
</h1>
<p id="GFG_UP"
   style="font-size: 15px;
              font-weight: bold;">
</p>
<form>
    请输入内容:
    <input id="input"
           onkeypress="return GFG_Fun(this, event)"
           type="text">
</form>
<br>
<p id="GFG_DOWN"
   style="font-size: 23px;
              font-weight: bold;
              color: orange; ">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML =
        "查看输入是否有效";

    function isValid(el, evnt) {
        var charC = (evnt.which) ? evnt.which : evnt.keyCode;
        if (charC == 46) {
            if (el.value.indexOf(&#39;.&#39;) === -1) {
                return true;
            } else {
                return false;
            }
        } else {
            if (charC > 31 && (charC < 48 || charC > 57))
                return false;
        }
        return true;
    }

    function GFG_Fun(t, evnt) {
        var a = isValid(t, evnt);
        if (a) {
            el_down.innerHTML = "输入的是有效字符";
        } else {
            el_down.innerHTML = "输入的是无效字符";
        }
        return a;
    }
</script>
</body>
</html>

Copy after login

The running results are as follows:

GIF 2021-8-26 星期四下午 2-19-32.gif

In In the above code example:

Every time a character is entered, it will be checked whether the character is valid.
This example also checks the number of decimal places entered. One cannot enter 2 decimal places.
If the character is valid, it is added to the input, otherwise it is invalid.

Finally, I would like to recommend "JavaScript Basics Tutorial" ~ Welcome everyone to learn ~

The above is the detailed content of JavaScript restricts the input box to only allow integers and decimal points (two methods). For more information, please follow other related articles on the PHP Chinese website!