有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
我对于更好的用户体验的解决方案:
超文本标记语言
<input type="tel">
jQuery
$('[type=tel]').on('change', function(e) {
$(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
keys = ['0','1','2','3','4','5','6','7','8','9','.']
return keys.indexOf(event.key) > -1
})
细节:
首先,输入类型:
数字显示的上下箭头缩小了实际的输入空间,我发现它们很丑,只有当数字表示一个数量时才有用(比如电话、区号、id……)不需要) Tel提供类似的没有箭头的数字浏览器验证
使用[number / tel]也有助于在移动设备上显示数字键盘。
对于JS验证,我最终需要2个函数,一个用于正常的用户输入(按键),另一个用于复制+粘贴修复(更改),其他组合会给我一个糟糕的用户体验。
我使用更可靠的KeyboardEvent。key代替现在已弃用的KeyboardEvent.charCode
根据你的浏览器的支持,你可以考虑使用Array.prototype.includes()而不是名字不好的Array.prototype.indexOf() (true / false结果)
其他回答
上面的一些答案使用了过时的内容,比如which的使用。
要检查按下的键是否为数字,可以使用keyup eventListener来读取event.key的值。如果不是数字,就不要输入字符。您可以将其他密钥加入白名单。例如,允许用户使用箭头在输入字段中向后或向前导航,或者按退格键并删除输入的数字。
validate (event) {
const isNumber = isFinite(event.key)
const whitelist = ['Backspace','Delete','ArrowDown','ArrowUp','ArrowRight','ArrowLeft']
const whitelistKey = whitelist.includes(event.key)
if (!isNumber && !whitelistKey) {
event.preventDefault()
}
}
使用这个DOM:
<input type = "text" onkeydown = "validate(event)"/>
还有这个脚本:
validate = function(evt)
{
if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
...或者这个脚本,没有indexOf,使用两个for…
validate = function(evt)
{
var CharValidate = new Array("08", "046", "039", "948", "235");
var number_pressed = false;
for (i = 0; i < 5; i++)
{
for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
{
if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
{
number_pressed = true;
}
}
}
if (number_pressed == false)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
我使用onkeydown属性而不是onkeypress,因为onkeydown属性是在onkeypress属性之前检查的。问题出在谷歌Chrome浏览器上。
与属性“onkeypress”,标签将不可控与“preventDefault”谷歌chrome,然而,与属性“onkeydown”,标签变成可控!
9 . TAB =>的ASCII码
第一个脚本的代码比第二个脚本少,但是ASCII字符数组必须包含所有的键。
第二个脚本比第一个脚本大得多,但是数组并不需要所有的键。数组每个位置的第一位数字是每个位置将被读取的次数。对于每一个读数,都将加1到下一个读数。例如: NCount = 0
48 + NCount = 48
NCount + +
48 + NCount = 49
NCount + +
...
48 + NCount = 57 在数字键只有10(0 - 9)的情况下,但如果它们是100万个,那么创建一个包含所有这些键的数组就没有意义了。
ASCII代码:
8 ==>(退格); 46 =>(删除); 37 =>(左箭头); 39 =>(右箭头); 48 - 57 =>(数字); 36 => (home); 35 => (end);
谢谢大家,这真的帮助了我!
我发现最好的一个对数据库非常有用。
function numonly(root){
var reet = root.value;
var arr1=reet.length;
var ruut = reet.charAt(arr1-1);
if (reet.length > 0){
var regex = /[0-9]|\./;
if (!ruut.match(regex)){
var reet = reet.slice(0, -1);
$(root).val(reet);
}
}
}
然后添加事件处理程序:
onkeyup="numonly(this);"
这可以立即删除任何坏字符,只允许一个点,是短的,并允许退格等:
$('.numberInput').keyup(function () {
s=$(this).val();
if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});
一个使用jQuery和replace()而不是查看事件的简短而甜蜜的实现。keyCode或event.which:
$('input.numeric').live('keyup', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
只有一个小的副作用,输入的字母出现暂时和CTRL/CMD + A似乎表现有点奇怪。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求