这对我来说是奇怪的行为,但在Webkit浏览器(Chrome/Safari,而不是Firefox)上,如果我在<input type=number>
的数字字符串中包含空格,则该输入的value
为空。
请参阅此 JSFiddle:http://jsfiddle.net/timrpeterson/CZZEX/5/
代码如下:
<input id='withOutspace' type='number' value='123'>
<input id='with_space' type='number' value='123 123'>
<button>click</button>
$('button').click(function(){
alert("withOut:"+$('#withOutspace').val()+" |||| with:"+$('#with_space').val());
});
如果你转到这个JSFiddle,你会注意到with_space
输入是空的。但是,如果您在其中输入一个包含空格或任何非数字字符的数字,警报将说输入为空。
显然,这对于使用信用卡号等进行表单验证来说是一场灾难,那么有人对此有黑客攻击吗?
黑客是使用 type="tel"
而不是 type="number"
.
这解决了两个主要问题:
- 它在移动设备上拉起一个数字键盘
- 它使用数字或非数字作为输入进行验证(并且不为空)。
请参阅此 JSFiddle:http://jsfiddle.net/timrpeterson/CZZEX/6/
我可以建议两种方法。1. 防止输入中的字符
# updated to support more numerical characters related
$(window).keydown(function(e) {
if($('input[type=number]').index($(e.target))!=-1) {
if(
($.inArray(e.keyCode, [48,49,50,51,52,53,54,55,56,57,58,96,97,98,99,100,101,102,103,104,105,8,13,190,189]) == -1) // digits, digits in num pad, 'back', 'enter', '.', '-'
|| (e.keyCode == 190 && $(e.target).val().indexOf(".") != -1) // not allow double dot '.'
|| (e.keyCode == 190 && $(e.target).val().length == 0) // not allow dot '.' at the begining
) {
e.preventDefault();
}
}
});
或 2.动态更改输入的类型
$('input[type=number]').focus(function() {
$(this).prop('type', 'text');
});
这允许放置您想要的任何内容并将其类型更改回onblur
$(this).blur(function() {
$(this).prop('type', 'number');
});
但是您仍然不能在 type=number 的输入中存储非数值,因此如果它满足 char 或空格val()
将始终返回空字符串。
因此,至少您必须使用.replace(/[^d]/g, '')
删除所有垃圾 - 这意味着在更改类型之前"删除除数字以外的所有垃圾"
在我的示例中,我显示了两种方法+清晰的输入值。
控制输入数字的一种方法是在无法读取值时将其设置为模糊
static formattedDecimalInput(input, maxScale, allowEmpty = true) {
input = $(input);
input.on("blur", function(e) {
var inputVal = input.val();
if(inputVal != "" || !allowEmpty) {
if(inputVal == "") {
inputVal = "0";
}
var number = Number(inputVal);
input.val(number.toFixed(maxScale));
} else {
input.val("");
}
});
}
你可以顺便格式化它,如果你在服务器端有无效的字符,你可以发送一个错误的请求响应。
如果你想要一个必填字段,你可以在服务器调用之前用javascript检查输入是否为空
这不是最初问题的答案,但是当我到达这里时,我正在寻找一种用户友好的控件来控制这种类型的输入
我对这个问题的技巧包括以下内容(我使用 jQuery 验证器):
$(document).on('keyup', '[type="number"]', function () {
if (this.validity.badInput) {
$(this).attr('data-badinput', true);
}
});
稍后在验证器方法中,我这样做:
$.validator.addMethod('isInteger', function (value, element, parameterValue) {
if ($(element).attr('data-badinput')) {
//We know nasty browser always clears incorrect input, so empty string will look OK next time
$(element).removeAttr('data-badinput');
return false;
}
return !value || /^-?d+$/.test(value);
});
您正在将数字输入字段设置为不是数字的字符串。你期望会发生什么?重点是这些字段不允许或接受非数字输入。它们被记录为只接受浮点值。
没有可用或必需的"hack";解决方案是停止对不是数字的值使用number
输入字段。信用卡、电话号码等;这些东西不是数字。它们包含数字作为有效字符的子集,但它们也包含完全非数字字符,如空格、连字符和括号。它们需要存储并被视为常规字符串。
使用<input type="text"/>
.