5

HTML5 テキストボックスでユーザー入力を特定の長さに制限するにはどうすればよいinput[type=number]ですか?

への答え

HTML5の「数値」要素で可能な入力を制限するにはどうすればよいですか?

不正な入力を処理しない

<input class="quantity" type="number" min="0" max="99999" maxlength="5" />

$("quantity").keyup(function(){
    var $field = $(this);
    if ($field.val().length > Number($field.attr("maxlength"))) {
        var value = $field.val().slice(0, 5);
        $field.val(value);
    }
});

maxlength 属性がサポートされていないことはわかっていますが、指定された長さを取得するために使用しています。

上記のコードは、firefox では問題なく動作しますが、chrome と safari では、5 つの「有効な」文字を入力した場合にのみ動作します。「a」、「b」などの無効な文字を入力し始めると、さらに文字を入力できるようになり、テキストボックスの色が赤に変わります。

入力が無効になると、$field.val()常に空の文字列が返され$field.val().length、が返されることがわかりました0。

キーコードを入力用の文字に変換し、入力ボックスの「データ値」属性に保存して、入力の値をチェックして上書きしようとしましたが、信頼できるようには見えませんでした。

input[type=number]と同じように動作させることができる解決策はありますinput[type=text][maxlength=5]か?

4

4 に答える 4

4

いくつかのことをテストした後の私の提案は次のとおりです

  1. 数量クラスで複数のフィールドを処理します
  2. サポートされている場合、不正な入力を処理します
  3. defaultValueすべてのフィールドをクラスに格納して初期化します
  4. .index() で奇妙さを処理します
  5. IE<10でも動作します
  6. Windows の Safari 5.1 でテスト済み - is(":invalid") に反応しましたが、IE8 では無効です

ライブデモ

var inputQuantity = [];
$(function() {
  $(".quantity").each(function(i) {
    inputQuantity[i]=this.defaultValue;
     $(this).data("idx",i); // save this field's index to access later
  });
  $(".quantity").on("keyup", function (e) {
    var $field = $(this),
        val=this.value,
        $thisIndex=parseInt($field.data("idx"),10); // retrieve the index
    // NOTE :invalid pseudo selector is not valid in IE8 so MUST be last
    if (this.validity && this.validity.badInput || isNaN(val) || $field.is(":invalid") ) { 
        this.value = inputQuantity[$thisIndex];
        return;
    } 
    if (val.length > Number($field.attr("maxlength"))) {
      val=val.slice(0, 5);
      $field.val(val);
    }
    inputQuantity[$thisIndex]=val;
  });      
});
于 2013-08-07T13:46:08.940 に答える
0

最大制限を動的に設定する

function limit(element,max_chars) {

  if(element.value.length > max_chars) {
    element.value = element.value.substr(0, max_chars);
  }
}


<input type="number" onkey ="limit(this);" onkeyup="limit(this,2);">
于 2014-04-16T05:54:33.427 に答える