JavaScript で無効になった入力要素のイベントを処理するにはどうすればよいですか?

無効化された入力要素のイベント処理

無効化された入力要素は、標準イベント処理と同じようには応答しないことが観察されています。アクティブな要素。これにより、Web アプリケーションの特定の機能の開発が妨げられる可能性があります。この記事では、この問題に対処するための潜在的な解決策を検討し、無効になった入力要素のイベント処理に関する包括的なガイドを提供します。

問題:

入力要素が無効になっている場合が無効になっている場合、通常、クリックまたは操作されたときにイベント ハンドラーはトリガーされません。このような要素を動的に有効にしたり操作したりしようとすると、問題が発生する可能性があります。

解決策 1:

この制限を克服する 1 つのアプローチは、イベント ハンドラーを無効な入力のコンテナ要素。ほとんどのブラウザは無効な要素からのイベントを DOM ツリーに伝播し、親要素でのイベント処理を可能にしますが、Firefox ではこの動作に対する例外が発生します。

解決策 2:

より堅牢な解決策には、無効な入力の上に要素を配置して、イベント ハンドラーをオーバーレイ要素に登録できるようにすることが含まれます。これにより、異なるブラウザ間で一貫性が確保され、必要なイベント処理機能が可能になります。

実装:

オーバーレイ アプローチを実装するには、次の HTML 構造を使用できます。

<div>
<p>そして以下の jQueryコード:</p>
<pre class="brush:php;toolbar:false">$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

例:

このアプローチの実際のデモは、http://jsfiddle.net/RXqAm/170/

このソリューションは、無効になっている入力要素のイベント処理を効果的に有効にし、ブラウザ間の互換性を確保し、そのような入力要素との動的な対話を可能にします。要素。