30

这对我来说是一种奇怪的行为，但在 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输入是空的。但是，如果您在其中输入一个带有空格或任何非数字字符的数字，则警报会说输入为空。

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

4

5 回答 5

42

hack 是使用type="tel"而不是type="number".

这解决了两个主要问题：

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

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

于 2013-09-07T22:11:22.837 回答
5

我可以建议两种方法。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()如果遇到字符或空格，它将始终返回空字符串。

所以，至少你必须删除所有垃圾.replace(/[^\d]/g, '')- 这意味着在你改回类型之前“删除所有除了数字”

在我的示例中，我展示了这两种方法 + 清除输入值。

于 2013-09-08T04:14:11.227 回答
2

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

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

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

于 2018-10-05T00:53:27.537 回答
1

我对这个问题的破解包括以下内容（我使用 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);
    });
于 2015-10-23T13:28:23.010 回答
0

您正在将数字输入字段设置为不是数字的字符串。你期望会发生什么？重点是这些字段不允许或接受非数字输入。它们被记录为仅接受浮点值。

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

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

于 2013-09-07T20:05:50.350 回答