入力タグの内容の変更によってトリガーされるイベントの詳細な説明 (例付き)

不言

リリース： 2018-11-20 15:32:32

転載

4784 人が閲覧しました

この記事では、入力タグの内容の変更によってトリガーされるイベントについて詳しく説明します (例を示します)。必要な方は参考にしていただければ幸いです。

ネイティブメソッド

onchange イベント

<input type="text" onchange="onc(this)">

ログイン後にコピー

function onc(data){
    console.log(data.value);
}

ログイン後にコピー

onchange イベントは、コンテンツが変更されてフォーカスを失ったときにトリガーされます。つまり、フォーカスが失われてコンテンツが変化しない場合はトリガーされません。コンテンツが変化してもフォーカスが失われない場合は、リアルタイムでトリガーされません。
js は値 value を直接変更するとトリガーされません

oninput イベント

<input id="inp" type="text" oninput="inp(this)">

ログイン後にコピー

function inp(data) {
    console.log(data.value)
}

ログイン後にコピー

oninput イベントは、入力内容が変更されたときにリアルタイムでトリガーされます。 oninput イベントは、IE を除くほとんどのブラウザでサポートされているイベントで、値が変化するとリアルタイムでトリガーされます。
js が値を直接変更した場合にはトリガーされません。

onpropertychange イベント

onpropertychange イベントは、キャラクターが追加または削除されるたびにトリガーされますが、このイベントは JS の変更によってもトリガーされます。このイベントは IE 限定です。
入力が disable=true に設定されている場合、トリガーされません。

oninput イベントと onpropertychange イベントの違い:

onpropertychange イベントはプロパティの変更によってトリガーされますが、oninput は値が変更される必要がある場合にのみトリガーされます。 addEventListener() を介した onpropertychange 登録メソッドは一般イベントと同じです。

Oninput は onpropertychange と組み合わせて使用されます

Oninput は HTML5 の標準イベントで、textarea、input:text、input:password、input:search 要素のコンテンツの変更を検出するために使用されます。ユーザーインターフェイスは非常に便利で、トリガーする前にフォーカスを失う必要がある onchange イベントとは異なり、コンテンツが変更された直後にトリガーされます。 oninput イベントは IE9 より前のバージョンではサポートされていないため、IE 固有の onpropertychange イベントに置き換える必要があります。このイベントは、ユーザーインターフェイスが変更されたとき、またはスクリプトを使用してコンテンツが直接変更されたときにトリガーされます。

変更 input:checkbox または input:radio 要素の選択状態が変更され、checked 属性が変更されます。
input:text 要素または textarea 要素の値が変更され、value 属性が変更されます。
select 要素の選択項目が変更され、selectedIndex 属性が変更されました。
onpropertychange イベントをリッスンした後、イベントの propertyName 属性を使用して、変更されたプロパティ名を取得できます。

入力ボックスの内容の変更を監視するために oninput と onpropertychange を収集するサンプルコードは次のとおりです:

// Firefox、Google Chrome、Opera、Safari、Internet Explorer バージョン 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);
    }
}

<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

ログイン後にコピー

jQuery

を使用する場合は、oninput イベントと onpropertychange イベントを同時にバインドするだけです。サンプルコードは次のとおりです。

最後に注意すべき点は、IE9 には oninput イベントと onpropertychange イベントの両方に小さなバグがあります。つまり、右クリックメニューの切り取りコマンドと削除コマンドによってコンテンツが削除されたときにイベントはトリガーされませんが、正常です。他のバージョンの IE では。

以上が入力タグの内容の変更によってトリガーされるイベントの詳細な説明 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。