JS控制 input 标签输入为数字及错误提示

最新推荐文章于 2024-07-08 17:42:28 发布

alabozimu

最新推荐文章于 2024-07-08 17:42:28 发布

阅读量1.1w

点赞数 7

分类专栏： HTML 学习笔记文章标签：学习笔记

本文链接：https://blog.csdn.net/qq_36403227/article/details/88713961

版权

学习笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

学习笔记：

假设现在需要限制<input>标签内输入的内容为数字，并且对其大小进行判断。

涉及的知识主要有：
1.onblur , onblur 事件会在对象失去焦点时发生，也就是当焦点离开当前输入框的时候

οnblur=“SomeJavaScriptCode”

2.onkeyup，onkeyup 属性在用户（在键盘上）释放按键时触发。也就是每输入一个字符，就立马判断是否为非法字符

<element οnkeyup=“script”>，script使用适当的正则表达式就能够进行判断输入是否为数字

方法千万种，而我只会这一种

首先是<input>标签

需要限制输入的内容为数字，且在离开当前输入框时判断输入是否满足要求，不满足是弹出提示。

<input type="text" id="id名称" onkeyup="value=value.replace(/[^(\d)]/g,'')"
 								onblur="checkNum()" />

onkeyup中的正则表达式是限制内容为数字，不是数字的话使用空格替换。
onblur中的checkNum() 是调用函数进行判断输入数值是否非法。

其次是JS

首先通过<input>标签的id获取输入内容，并转换为整数值

var Num = parseInt(document.getElementById("id名称").value)

因为通过document.getElementById(“id名称”).value获取的输入内容是字符串，所以需要使用parseInt() 将之转化为整型。

下一步则是判断输入的数值是否合法，不合法的话弹出提示框并清空输入框。

if(Num > 0 || Num < 100 || isNaN(Num)){      //isNaN(Number)判断Number是否为空
        alert("输入数据需在0~100之间");
        document.getElementById('Num').value = "";     //清空输入框
    }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CeckNumber</title>
</head>
<script type="text/javascript">
    function checkNum(){
        var Num = parseInt(document.getElementById("id名称").value)
        if(Num > 0 || Num < 100 || isNaN(Num)){      
            alert("输入数据需在0~100之间");
            document.getElementById('id名称').value = ""; 
        }
    }
</script>
<body>
<input type="text" id="id名称" onkeyup="value=value.replace(/[^(\d)]/g,'')"
       onblur="checkNum()" />
</body>
</html>