-1

先日、フォームを作成しているときに問題が発生しました。入力ボックスのタイプは「数値」です。Chrome では、入力フィールドに上下の矢印が表示されます。上下どちらのボタンをクリックしても変化を検知できなかったので、CSS を使用してボタンを削除しました。それは非常に簡単でしたが、すべての問題が解決したわけではありません。

フィールドでいくつかの検証を行います (keyup を使用)。フィールドに数字を入力すると正常に動作しますが、フィールドに文字を入力すると検出できません。

.val() を使用すると、フィールドの値 (数値または文字) を取得するために FF および IE で正常に機能しますが、Chrome ではそれほどではありません。フィールドに文字がある場合、フィールドをクリアする方法も見つかりません。.val('') を使用すると、カーソルが左に移動するだけです。

前述のとおり、この問題は Chrome の使用に固有のものです。他のすべてのブラウザでは、私のコードは正常に動作します。

この問題を解決するために使用できるコードに関する提案はありますか?

4

1 に答える 1

0

この問題はすべて、入力が「数値」型であることを中心に展開しています。

HTML5 ドラフトでは次のように定義されています。

値のサニタイズ アルゴリズムは次のとおりです。要素の値が有効な浮動小数点数でない場合は、代わりに空の文字列に設定します。

http://www.w3.org/TR/html5/forms.html#number-state

.val() を実行して、非数値を含む type=number 入力を取得しようとすると、空の文字列のみが返されます。これのChromeの実装は、実際に値を取得する前にフィールドの値を空の文字列に設定することのようです。

.val('') を使用してフィールドをリセットし、キーアップが認識されない限り、このコードは動作するようですhttp://jsfiddle.net/hVVSA/2/

JS

var $input = $('input').keyup(function(){
  console.log("here");
});

$('#clearfield').click(function(){
  console.log('val was '+$input.val());
  $input.val('');
});

HTML

<input type="number" />

<button id="clearfield">clear</button>
于 2013-01-12T02:13:43.650 に答える