请问如何不让type=number的Input,不可输入加号减号和多个小数点?

先谢谢各位了,我是写了一个type = number的Input,鉴于业务需求,这个Input中只能输入数字,加减号不可输入。
本来想判断input中的value值来手动删掉里面的加号减号及多余的点,可是又发现一旦输入的值不合法,Input的value已经被转化为空字符串 ‘’。这样我就无法取到input中的值了。
想了许久不知道解决方法,求各位大神帮忙了,谢谢~
对了,我是用vue写的页面~~~

阅读 21.8k
7 个回答

用正则匹配 '^[-]?[0-9]*\.?[0-9]+(eE?[0-9]+)?$'

<input type="text" />

可以用这种方式,监听input值的变化,发现验证不过就提示。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome</title>
</head>
<body>
<form>
    <input id="inputNumber" type="text" name="test" onblur="checkNumber()">
</form>

<script type="text/javascript">
 function checkNumber(){
    var inputNumber = document.getElementById('inputNumber').value;
    if(!/^[-]?[0-9]*\.?[0-9]+(eE?[0-9]+)?$/.test(inputNumber)){
        alert('Please input a valid number!');
        return false;
    }
}
</script>
</body>
</html>

type=number应该是无法直接限制用户不能输入正负号、e、多个小数点的。
还是需要通过input的value来判断。
至于输入的值不合法,input的value被转化成空字符串的问题,
可以将input的type改成text,然后使用正则和replace去除非数字和多个小数点就行了。

把你的js贴出来看看

onkeyup="this.value=this.value.replace(/D/g,'')" onafterpaste="this.value=this.value.replace(/D/g,'')"

那你可以用 v-model绑定一个值,然后通过watch 来监听这个值,但你找到有非法的值得时候,删掉非法的字符串即可

<input type="tel" />

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题