有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
请找到下面提到的解决方案。在此用户只能输入数值,同时用户不能在输入中复制、粘贴、拖放。
允许的字符
0,1,2,3,4,5,6,7,8,9
不允许字符和字符通过事件
字母的值 特殊字符 复制 粘贴 拖 下降
$(document).ready(function() { $('#number').bind("cut copy paste drag drop", function(e) { e.preventDefault(); }); }); function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">
如果不行就告诉我。
其他回答
我找不到一个明确的答案,它不会每次都遍历整个字符串,所以这里:
document.querySelectorAll("input").forEach(input => {
input.addEventListener("input", e => {
if (isNaN(Number(input.value[input.value.length-1])) && input.value[input.value.length-1] != '.') {
input.value = input.value.slice(0, -1);
}
})
});
没有正则表达式,它会在每次输入时检查最后一个字符,如果它不是数字或句点,它就会切片。
这里是一个非常简短的解决方案,不使用已弃用的keyCode或,不阻塞任何非输入键,并使用纯javascript。(在Chromium 70.0.3533, Firefox 62.0和Edge 42.17134.1.0中测试)
HTML:
<input type="text" onkeypress="validate(event)">
JS:
function validate(ev) {
if (!ev) {
ev = window.event;
}
if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {
return ev.preventDefault();
}
}
对于喜欢说俏皮话的人。
string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
我在输入type="text"上使用这段代码,并使用AngularJS在按键时激活,但如果喜欢,可以使用jQuery。只需将此代码放入一个函数中,该函数以某种方式通过按键激活。
它只允许数字,数字+十进制,数字+十进制+数字。
CODE
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";
testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";
testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";
testFour = "622632463.23464236326324363"
=> "622632463.23";
这是为美国货币构建的,但它可以更改为允许超过两个小数点后的第一个小数,如下所示…
改变了代码
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');
testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";
:)
以下是我仅针对React用户的简单解决方案,我找不到更好的解决方案,所以我自己做了一个。3步骤。
首先,创建一个状态。
const [tagInputVal, setTagInputVal] = useState("");
然后,使用状态作为输入值(value={tagInputVal})并将事件传递给onChange处理程序。
<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>
然后,在onChange处理程序中设置事件的值。
function onChangeTagInput(e) {
setTagInputVal(e.target.value.replace(/[^\d.]/ig, ""));
}
Input type="tel"在移动设备上工作得很好,所以你要保留它。
只需使用以下代码(JQuery):
$("input[type=tel]").keydown(function (event) {
return (event.which >= 48 && event.which <= 57) || //0 TO 9
event.which === 8 || event.which == 46; //BACKSPACE/DELETE
});
你的输入是:
<input type="tel" />
你可以添加任何你喜欢的输入字段,id,而不需要绑定任何其他监听器。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求