30

これは私にとって奇妙な動作ですが、Webkit ブラウザー ( Firefox ではなくChrome/Safari ) では、数字の文字列にスペースを含めると、<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

ハックは、type="tel"の代わりに使用することですtype="number"。

これにより、次の 2 つの主な問題が解決されます。

  1. モバイル デバイスの数字キーパッドを表示します
  2. 数値または非数値を入力として検証します (空ではありません)。

この JSFiddle を参照してください: http://jsfiddle.net/timrpeterson/CZZEX/6/

于 2013-09-07T22:11:22.837 に答える
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 に答える