有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
以下是我仅针对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, ""));
}
其他回答
这里的大多数答案都有使用关键事件的缺点。
许多答案会限制你使用键盘宏进行文本选择、复制+粘贴和更多不必要的行为,其他的似乎依赖于特定的jQuery插件,这是用机关枪杀苍蝇。
这个简单的解决方案似乎最适合我跨平台,不管输入机制(击键,复制+粘贴,右键单击复制+粘贴,语音到文本等)。所有文本选择键盘宏仍然可以工作,它甚至会限制通过脚本设置非数字值的能力。
function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
您可以尝试使用" 'onkeydown " '事件并取消事件(事件。preventDefault或类似的)当它不是允许的键之一。
以下是我仅针对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, ""));
}
在准备验证任何东西时调用此函数。我在这里使用了一个文本框
在我的HTML中:
<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />
在JavaScript代码中:
function check(num){
var onlynumbers = true
for (var i = 0; i < (num.length - 1); i++) {
if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
alert("please make sure that only numbers have been entered in the Quantaty box");
onlynumbers = false
}
}
if (onlynumbers == true) {
//Execute Code
}
}
现在大多数浏览器都支持type="number"这个属性
<input type="number" maxlength="3" ng-bind="first">
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求