js dan jquery pemantauan masa nyata kaedah oninput dan onpropertychange bagi kotak input kemahiran value_javascript

WBOY
Lepaskan: 2016-05-16 16:15:42
asal
1049 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah oninput dan onpropertychange bagi js dan jquery yang memantau nilai kotak input dalam masa nyata. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Saya baru-baru ini mengusahakan projek, dan keperluannya adalah untuk memadankan kata kunci secara automatik dalam kotak lungsur turun. Butiran khusus adalah untuk memantau perubahan dalam nilai kotak teks dalam masa nyata, dan kemudian memadankan kandungan yang berkaitan .

Apabila saya mula-mula mengambil projek itu, perkara pertama yang saya fikirkan ialah perubahan dalam JQ, tetapi saya segera menolak kaedah ini kerana perubahan dicetuskan apabila kotak teks hilang fokus. Untuk menyelamatkan negara, saya terfikir untuk menggunakan keydown untuk menyelesaikannya. Segala-galanya baik-baik saja, kecuali acara ini tidak boleh dicetuskan apabila menyalin dan menampal menggunakan tetikus dan bukannya menggunakan papan kekunci. Jadi kaedah ini juga dihapuskan.

Kemudian, saya menyemak beberapa maklumat yang berkaitan dan mendapati bahawa hanya oninput & onpropertychange dari native js memenuhi keperluan ini. Kemudian saya pergi ke JQ's API untuk mencari kaedah pemadanan. Saya kecewa kerana saya tidak menemuinya, tetapi mengikat memang akan mengikat sesuatu seperti ini adalah input & propertychange Selepas lulus ujian, memang tiada masalah.

Sekarang ini ialah contoh:

JQ:

$('input').bind('input propertychange', function() { 
 //进行相关操作 
});

Salin selepas log masuk

Antaranya: propertychange adalah untuk keserasian dengan versi di bawah IE9.

Peristiwa oninput dalam JS tidak disokong dalam versi di bawah IE9 Ia perlu digantikan dengan peristiwa onpropertychange IE ini akan dicetuskan apabila antara muka pengguna berubah atau apabila kandungan diubah suai menggunakan skrip situasi berikut:

Status pilihan input:kotak pilihan atau input:elemen radio telah diubah suai dan atribut yang ditanda telah berubah.

Nilai elemen input:text atau textarea diubah suai dan atribut nilai berubah.
Item terpilih bagi elemen pilih diubah suai dan atribut SelectIndex berubah.
JS:

if(isIE) 
{ 
 document.getElementById("input").onpropertychange = keys(); 
} 
else //需要用addEventListener来注册事件 
{ 
 document.getElementById("input").addEventListener("input", keys, false);
}

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan