inputラベル内容変更トリガイベント
2578 ワード
オリジナルメソッド
onchangeイベント
onchangeイベントは、コンテンツが変更され、フォーカスが失われたときにトリガーされます.すなわち、フォーカスを失ってもコンテンツは変化せずにトリガーされず、コンテンツが変化してもフォーカスを失ってもリアルタイムでトリガーされない.jsがvalue値を直接変更した場合にトリガーされません
oninputイベント
oninputイベントは、入力内容が変更されたときにリアルタイムでトリガーされます.oninputイベントはIE以外のほとんどのブラウザでサポートされているイベントであり、valueが変更されるとリアルタイムでトリガーされます.jsがvalue値を直接変更した場合はトリガーされません.
onpropertychangeイベント
onpropertychangeイベントはリアルタイムトリガであり、1文字増加または削除するたびにトリガされ、js変更によってもイベントがトリガされますが、このイベントはIE固有です.inputがdisable=trueに設定されている場合、トリガーされません.
oninputイベントとonpropertychangeイベントの違い:
onpropertychangeイベントは任意の属性変更がトリガーされますが、oninputはvalue変更時にトリガーされます.oninputはaddEventListener()で登録され、onpropertychange登録方法は一般イベントと同じです.
oninputとonpropertychangeを併用
oninputはHTML 5の標準イベントであり、textarea、input:text、input:password、input:searchのいくつかの要素がユーザーインタフェースを通じて発生するコンテンツの変化を検出するのに非常に役立ち、コンテンツの修正後すぐにトリガーされ、onchangeイベントのように焦点を失ってトリガーされる必要はありません.oninputイベントはIE 9の次のバージョンではサポートされていません.IE固有のonpropertychangeイベントの代わりに使用する必要があります.このイベントは、ユーザーインタフェースが変更されたり、スクリプトを使用して直接コンテンツが変更されたりする場合にトリガーされます.次のような場合があります.
Input:checkboxまたはinput:radio要素の選択中の状態が変更され、checkedプロパティが変化します.input:textまたはtextarea要素の値が変更され、valueプロパティが変化します.select要素の選択を変更すると、selectedIndexプロパティが変更されます.onpropertychangeイベントをリスニングした後、eventのpropertyNameプロパティを使用して、変更されたプロパティ名を取得できます.
集合oninput&onpropertychangeは、入力ボックスの内容の変化をリスニングするコードの例を以下に示します.
//Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
//Internet Explorer
jQueryの使用
oninputとonpropertychangeの2つのイベントを同時にバインドするだけでいいです.サンプルコードは次のとおりです.
最後に注意しなければならないのは、oninputとonpropertychangeの2つのイベントは、IE 9に小さなBUGがあります.それは、右クリックメニューのカットと削除コマンドでコンテンツを削除したときにトリガーされず、IEの他のバージョンは正常です.
onchangeイベント
function onc(data){
console.log(data.value);
}
onchangeイベントは、コンテンツが変更され、フォーカスが失われたときにトリガーされます.すなわち、フォーカスを失ってもコンテンツは変化せずにトリガーされず、コンテンツが変化してもフォーカスを失ってもリアルタイムでトリガーされない.jsがvalue値を直接変更した場合にトリガーされません
oninputイベント
function inp(data) {
console.log(data.value)
}
oninputイベントは、入力内容が変更されたときにリアルタイムでトリガーされます.oninputイベントはIE以外のほとんどのブラウザでサポートされているイベントであり、valueが変更されるとリアルタイムでトリガーされます.jsがvalue値を直接変更した場合はトリガーされません.
onpropertychangeイベント
onpropertychangeイベントはリアルタイムトリガであり、1文字増加または削除するたびにトリガされ、js変更によってもイベントがトリガされますが、このイベントはIE固有です.inputがdisable=trueに設定されている場合、トリガーされません.
oninputイベントとonpropertychangeイベントの違い:
onpropertychangeイベントは任意の属性変更がトリガーされますが、oninputはvalue変更時にトリガーされます.oninputはaddEventListener()で登録され、onpropertychange登録方法は一般イベントと同じです.
oninputとonpropertychangeを併用
oninputはHTML 5の標準イベントであり、textarea、input:text、input:password、input:searchのいくつかの要素がユーザーインタフェースを通じて発生するコンテンツの変化を検出するのに非常に役立ち、コンテンツの修正後すぐにトリガーされ、onchangeイベントのように焦点を失ってトリガーされる必要はありません.oninputイベントはIE 9の次のバージョンではサポートされていません.IE固有のonpropertychangeイベントの代わりに使用する必要があります.このイベントは、ユーザーインタフェースが変更されたり、スクリプトを使用して直接コンテンツが変更されたりする場合にトリガーされます.次のような場合があります.
Input:checkboxまたはinput:radio要素の選択中の状態が変更され、checkedプロパティが変化します.input:textまたはtextarea要素の値が変更され、valueプロパティが変化します.select要素の選択を変更すると、selectedIndexプロパティが変更されます.onpropertychangeイベントをリスニングした後、eventのpropertyNameプロパティを使用して、変更されたプロパティ名を取得できます.
集合oninput&onpropertychangeは、入力ボックスの内容の変化をリスニングするコードの例を以下に示します.
//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);
}
}
jQueryの使用
oninputとonpropertychangeの2つのイベントを同時にバインドするだけでいいです.サンプルコードは次のとおりです.
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});
最後に注意しなければならないのは、oninputとonpropertychangeの2つのイベントは、IE 9に小さなBUGがあります.それは、右クリックメニューのカットと削除コマンドでコンテンツを削除したときにトリガーされず、IEの他のバージョンは正常です.