jqueryには入力イベントがありますか?-フロントエンドQ&A-php.cn

jqueryには入力イベントがありますか?

藏色散人

リリース： 2023-03-21 10:41:05

オリジナル

1865 人が閲覧しました

jquery には入力イベントがあります。jquery は、入力ボックスのリアルタイム入力トリガーイベントコードを実装します。「$('#productName').bind('input propertychange', function() {...}".

jqueryには入力イベントがありますか?

#このチュートリアルの動作環境 : Windows10 システム、jquery3.6 バージョン、Dell G3 コンピューター。

jquery には入力イベントがありますか?

はい。

jquery 実装入力入力ボックスのリアルタイム入力トリガーイベントコード

コードは次のとおりです:

<input id="productName" name="productName" class="wid10" type="text" value="" />

ログイン後にコピー

コードは次のとおりです:

//绑定商品名称联想 
$(&#39;#productName&#39;).bind(&#39;input propertychange&#39;, function() {searchProductClassbyName();});

ログイン後にコピー

コードは次のとおりです:

searchProductClassbyName はトリガー後に呼び出されるメソッドです ;

jqueryには入力イベントがありますか?

js/jquery 入力ボックスの値の変化をリアルタイムで監視するための完璧なソリューションです。 oninput & onpropertychange

(1) まず jquery について話しましょう。jQuery ライブラリを使用する場合は、oninput イベントと onpropertychange イベントを同時にバインドするだけです。サンプルコード:

$(&#39;#username&#39;).bind(&#39;input propertychange&#39;, function() {
    $(&#39;#content&#39;).html($(this).val().length + &#39; characters&#39;);
});

ログイン後にコピー

(2) JS ネイティブ記述の場合、oninput は HTML5 の標準イベントです。テキストエリア、input:text の検出には、input:password 要素と input:search 要素は、ユーザーインターフェイスを介してコンテンツを変更する場合に非常に役立ちます。これらの要素は、トリガーされる前にフォーカスを失う必要がある onchange イベントとは異なり、コンテンツは変更されます。主流のブラウザーにおける oninput イベントの互換性は次のとおりです。 # 上の表からわかるように、oninput イベントは IE9 より前のバージョンではサポートされていません。IE 固有の onpropertychange イベントに置き換える必要があります。このイベントはユーザーによって使用されます。インターフェイスが変更されるか、または変更されたときにトリガーされます。スクリプトを使用してコンテンツを直接変更する場合、次のような状況が考えられます:

input:checkbox または input:radio 要素の選択状態が変更され、checked 属性が変更されます。 input:text 要素または textarea 要素の値が変更され、value 属性が変更されます。

select 要素の選択項目が変更され、selectedIndex 属性が変更されました。 jqueryには入力イベントがありますか?

onpropertychange イベントをリッスンした後、イベントの propertyName 属性を使用して、変更されたプロパティ名を取得できます。

コレクション oninput & onpropertychange 入力ボックスの内容の変更を監視するサンプルコードは次のとおりです:

 <head>
    <script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)"
     value="Text field" />
</body>

ログイン後にコピー

推奨学習:

jQuery ビデオチュートリアル

以上がjqueryには入力イベントがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。