web-dev-qa-db-ja.com

HTML5入力type = numberの値は、スペースまたは数字以外の文字が含まれている場合、Webkitで空ですか？

これは私にとって奇妙な動作ですが、Webkitブラウザー（Chrome/Safari、notFirefox）では、<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());
});

this JSFiddle にアクセスすると、with_space入力が空であることがわかります。ただし、スペースまたは数字以外の文字を含む数字を入力すると、入力が空であると警告されます。

明らかに、これはクレジットカード番号などを使用したフォームの検証にとっては災難です。

javascripthtml5formsvalidationinput
26
tim peterson

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

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

  1. モバイルデバイスの数字キーパッドを引き上げます
  2. 入力として数値または非数値を使用して検証します（そしてnot空です）。

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

38
tim peterson

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, '')ですべてのゴミを削除する必要があります。つまり、タイプを元に戻す前に「数字以外のすべてを削除する」ということです。

私の例 では、両方のメソッドを表示し、入力値をクリアします。

5
vladkras

入力番号を制御する方法は、値を読み取れないときにぼかし時に空に設定することです

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を使用して入力が空かどうかを確認するだけです。

それは最初の質問の答えではありませんが、ここに到着したとき、このタイプの入力のためのユーザーフレンドリーなコントロールを探していました

2
Vincent

この問題に対する私のハックには、次のものが含まれます（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);
    });
1
Alexander

数値ではない文字列に数値入力フィールドを設定しています。何が起こると思っていましたか？全体のポイントは、これらのフィールドが非数値入力を許可または受け入れないことです。 ドキュメント化された は 浮動小数点 値のみを受け入れます。

利用可能な「ハック」はありません。解決策は、が数値ではない値のnumber入力フィールドの使用を停止することです。クレジットカード、電話番号など。これらはnot数字です。有効な文字のサブセットとして数字が含まれていますが、スペース、ハイフン、括弧などの完全に非数字の文字も含まれています。これらは、通常の文字列として保存および処理する必要があります。

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

1
meagar