☰

無効な入力のイベント 質問する

tag-icon • tag-icon javascript jquery html
無効な入力のイベント 質問する

どうやら障害者は<input>どのイベントでも扱われないようだ

この問題を回避する方法はありますか?

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

ここで、入力をクリックして有効にする必要があります。ただし、アクティブにしないと、入力は投稿されません。

ベストアンサー1

無効な要素はマウス イベントを発生させません。ほとんどのブラウザは無効な要素から発生したイベントを DOM ツリーに伝播するため、イベント ハンドラをコンテナ要素に配置できます。ただし、Firefox ではこの動作は発生せず、無効な要素をクリックしても何も起こりません。

より良い解決策は思いつきませんが、完全なクロスブラウザ互換性のために、無効な入力の前に要素を配置し、その要素のクリックをキャッチすることができます。次に例を示します。

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

例：http://jsfiddle.net/RXqAm/170/prop(の代わりにjQuery 1.7 を使用するように更新されましたattr)。

おすすめ記事