HTML5输入类型=数字值在Webkit中是空的,如果有空格或非数字字符？

Question

这对我来说很奇怪,但是在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输入是空的.但是如果你把它放在一个有空格或任何非数字字符的数字中,警报会说输入是空的.

显然,这对于使用信用卡号等进行表单验证来说是一场灾难.所以有人对此有所攻击吗？

Answer 1

黑客是用type="tel"而不是type="number".

这解决了两个主要问题:

1. 它在移动设备上拉出一个数字小键盘
2. 它使用数字或非数字作为输入验证(并且不为空).

请看这个JSFiddle:http://jsfiddle.net/timrpeterson/CZZEX/6/

Answer 2

我可以提出两种方法.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存储非数值,因此val()如果遇到char或空格,将始终返回空字符串.

因此,至少你必须删除所有垃圾.replace(/[^\d]/g, '')- 这意味着在删除类型之前"删除除数字之外的所有"

在我的示例中,我显示了两种方法+清除输入值.