1. ホーム
  2. ジャバスクリプト

[解決済み】無効な入力にイベントを発生させる

2022-04-18 03:03:09

質問

どうやら障害者のようです <input> は、どのイベントでも処理されません

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

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

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

ここで、入力を有効にするためにクリックする必要があります。しかし、有効にしなければ、入力は投稿されないはずです。

解決方法は?

無効化された要素は、マウスイベントを発生させない。 ほとんどのブラウザは、無効化された要素から発生したイベントを 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/ (jQuery 1.7を使用するために更新された。 prop の代わりに attr ).