Question

这对我来说很奇怪，但是在Webkit浏览器（Chrome / Safari，不是 Firefox）上，如果我在<input type=number>中的数字字符串中包含空格，那么{{1该输入是空的。

请参阅此JSFiddle：http://jsfiddle.net/timrpeterson/CZZEX/5/

以下是代码：

value

如果您转到this JSFiddle，您会注意到<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()); });输入为空。但是如果你把它放在一个有空格或任何非数字字符的数字中，警告会说输入是空的。

显然，这对于使用信用卡号等进行表单验证来说是一场灾难。所以有人对此进行了破解吗？

Answer 1

黑客攻击是使用type="tel"而不是type="number"。

这解决了两个主要问题：

它在移动设备上拉出一个数字小键盘
以数字或非数字作为输入验证（并且不为空）。

请参阅此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, '')删除所有垃圾 - 这意味着在删除类型之前“删除除数字之外的所有垃圾”

在my example中，我显示了两种方法+清晰的输入值。

Answer 3

控制输入数字的一种方法是在无法读取值时在模糊时将其设置为空

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检查输入是否为空

这并不是最初问题的答案，但是我到达这里时正在寻找一种用户友好的控件用于这种类型的输入

Answer 4

您正在将数字输入字段设置为不是数字的字符串。你期望发生什么？重点是这些字段不允许或接受非数字输入。他们documented仅接受floating point值。

没有“hack”可用或不需要;解决方案是停止使用number输入字段获取不是数字的值。信用卡，电话号码等;这些东西是不是数字。它们包含数字作为有效字符的子集，但它们也包含完全非数字字符，如空格，连字符和括号。它们需要存储并作为常规字符串处理。

使用<input type="text"/>。

Answer 5

我对这个问题的解决包括以下内容（我使用jQuery验证器）：

{{#i18n}}{{/i18n}}

稍后在验证方法中我这样做：

    $(document).on('keyup', '[type="number"]', function () {
        if (this.validity.badInput) {
            $(this).attr('data-badinput', true);
        }
    });

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

5 个答案: