我想从<input type="number">
元素中删除用户输入中的所有非数字字符,但我无法使其工作。我的代码在<input type="text">
元素上运行正常,但是当您将text
更改为number
时,完全相同的代码无效。
HTML:
<input type="text">
<input type="number">
jQuery的:
// Works
$("[type='text']").on("change",function(){
var x = $(this).val();
x = parseInt(x.replace(/\D/g,''),10);
if (isNaN(x)) {x = "";}
$(this).val(x);
});
// Doesn't work
$("[type='number']").on("change",function(){
var x = $(this).val();
x = parseInt(x.replace(/\D/g,''),10);
if (isNaN(x)) {x = "";}
$(this).val(x);
});
如何让它发挥作用?
更新:@ axlpl的回答让我们得到了我们需要的东西。我使用他的代码作为起点并对其进行了修改,以确保它与Apple的命令键一起使用,并允许在单元格中完成某些其他操作。 Fiddle
答案 0 :(得分:2)
<input type="number">
在验证中有某种构建。只要字段中包含无效字符,val()
就为空。因此,您无法使用代码删除非数字元素,因为<input type="number">
编辑:
我推荐http://jqueryvalidation.org/之类的东西。它将为您提供不同的验证选项,并具有易于使用的错误输出。有了这个,您可以在输入上方添加一些红色文本,并告诉用户他可以在此字段中输入什么内容。
答案 1 :(得分:1)
这是你的答案:
http://jsfiddle.net/qnb8ayr7/6/
JS与PASTE和CTRL + V
var ctrlDown = false;
var ctrlKey = 17, vKey = 86;
$("[type='number']").on("keydown", function(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode == ctrlKey) ctrlDown = true;
if(ctrlDown == true && charCode == vKey) {
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}).keyup(function(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode == ctrlKey) ctrlDown = false;
});
$("[type='number']").bind("cut copy paste",function(evt) {
var number = (evt.originalEvent || evt).clipboardData.getData('text/plain');
x = parseInt(number.replace(/\D/g,''),10);
console.log(number);
$(this).val(x);
evt.preventDefault();
});
答案 2 :(得分:1)
根据WHATWG,除非是有效的数字输入,否则您无法获取该值。输入数字field's sanitization algorithm表示如果值浮点数,UA将设置为空字符串。
简而言之,算法说:
If the value of the element is not a valid floating-point number, then set it to the empty string instead.
通过指定<input type="number">
,您的浏览器会被指示为您运行算法,
这就是为什么允许非数字你必须使用<input type="text">
其次,您无法在此字段中使用change
事件。
相反,你必须使用oninput
来触发任何事件