JavaScript는 입력 상자에 정수와 소수점만 허용하도록 제한합니다(두 가지 방법).-JS 튜토리얼-php.cn

JavaScript는 입력 상자에 정수와 소수점만 허용하도록 제한합니다(두 가지 방법).

藏色散人

풀어 주다： 2021-08-26 14:22:50

원래의

4299명이 탐색했습니다.

이전 글 "JavaScript를 사용하여 한 번의 클릭으로 확장자를 삭제하고 파일명을 가져오는 방법"에서 한 번의 클릭으로 확장자를 삭제하고 필요한 친구가 JavaScript를 통해 파일명을 가져오는 방법을 소개했습니다. 읽고 배워보세요~

이 글의 주제는 JavaScript를 사용하여 입력 상자를 정수와 소수점만 허용하고 다른 기호의 사용을 허용하지 않도록 제한하는 방법을 가르치는 것입니다.

이제 두 가지 구현 방법을 소개하겠습니다.

첫 번째 방법:

<!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>

로그인 후 복사

실행 결과는 다음과 같습니다.

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

위 코드 예에서:

RegExp는 다음과 같이 사용됩니다. 입력을 확인하십시오.
문자를 입력할 때마다 전체 입력이 RegExp와 일치되어 유효성을 확인합니다.
유효하면 문자가 유효해져서 입력에 추가되고, 그렇지 않으면 유효하지 않습니다.

두 번째 방법:

<!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>

로그인 후 복사

실행 결과는 다음과 같습니다.

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