Cara terbaik untuk melacak onchange saat Anda mengetik input type = "text"?

Dalam pengalaman saya, input type="text" onchangeperistiwa biasanya terjadi hanya setelah Anda meninggalkan ( blur) kontrol.

Apakah ada cara untuk memaksa browser untuk memicu onchangesetiap kali textfieldkonten berubah? Jika tidak, apa cara paling elegan untuk melacak "secara manual" ini?

Menggunakan onkey*acara tidak dapat diandalkan, karena Anda dapat mengklik kanan bidang dan memilih Tempel, dan ini akan mengubah bidang tanpa input keyboard apa pun.

Apakah setTimeoutsatu-satunya jalan? .. Jelek :-)

Memperbarui:

Lihat jawaban lain (2015).

Jawaban Asli 2009:

Jadi, Anda ingin onchangeacara tersebut diaktifkan pada keydown, blur, dan paste? Itu ajaib.

Jika Anda ingin melacak perubahan saat diketik, gunakan "onkeydown". Jika Anda perlu menjebak operasi tempel dengan mouse, gunakan "onpaste"( IE , FF3 ) dan "oninput"( FF, Opera, Chrome, Safari ¹ ).

¹ _{Rusak untuk <textarea>di Safari. Gunakan textInputsebagai gantinya}

Hari-hari ini dengarkan oninput. Rasanya seperti onchangetanpa perlu kehilangan fokus pada elemen. Itu adalah HTML5.

Ini didukung oleh semua orang (bahkan ponsel), kecuali IE8 dan di bawah. Untuk IE tambahkan onpropertychange. Saya menggunakannya seperti ini:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

Kode di bawah ini berfungsi dengan baik untuk saya dengan Jquery 1.8.3

HTML: <input type="text" id="myId" />

Javascript / JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Javascript tidak dapat diprediksi dan lucu di sini.

• onchange terjadi hanya ketika Anda mengaburkan kotak teks
• onkeyup& onkeypressTidak selalu terjadi pada perubahan teks
• onkeydown terjadi pada perubahan teks (tetapi tidak dapat melacak potong & tempel dengan klik mouse)
• onpaste& oncutTerjadi dengan penekanan tombol dan bahkan dengan klik kanan mouse.

Jadi, untuk melacak perubahan di kotak teks, kita perlu onkeydown, oncutdanonpaste . Dalam panggilan balik acara ini, jika Anda memeriksa nilai kotak teks maka Anda tidak mendapatkan nilai yang diperbarui karena nilai diubah setelah panggilan balik. Jadi solusi untuk ini adalah mengatur fungsi batas waktu dengan batas waktu 50 mili-detik (atau mungkin kurang) untuk melacak perubahan.

Ini adalah retasan kotor tapi ini satu-satunya cara, seperti yang saya teliti.

Berikut ini sebuah contoh. http://jsfiddle.net/2BfGC/12/

onkeyupterjadi setelah Anda mengetik misalnya saya menekan tketika saya mengangkat jari tindakan terjadi tetapi pada keydowntindakan terjadi sebelum saya digit karaktert

Semoga ini bermanfaat bagi seseorang.

Jadi onkeyuplebih baik ketika Anda ingin mengirim apa yang baru saja Anda ketik sekarang.

Saya memiliki persyaratan serupa (bidang teks gaya twitter). Digunakan onkeyupdan onchange. onchangesebenarnya menangani operasi tempel mouse selama kehilangan fokus dari lapangan.

[Perbarui] Di HTML5 atau lebih baru, gunakan oninputuntuk mendapatkan pembaruan modifikasi karakter waktu nyata, seperti yang dijelaskan dalam jawaban lain di atas.

Saya pikir pada tahun 2018 lebih baik menggunakan inputacara ini.

-

Seperti yang dijelaskan oleh Spesifikasi WHATWG ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Dipecat pada kontrol ketika pengguna mengubah nilai (lihat juga acara perubahan )

-

Berikut ini contoh cara menggunakannya:

<input type="text" oninput="handleValueChange()">

Jika Anda HANYA menggunakan Internet Explorer, Anda dapat menggunakan ini:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

Semoga itu bisa membantu.

ada solusi yang cukup dekat (jangan memperbaiki semua cara Tempel) tetapi kebanyakan dari mereka:

Ini berfungsi untuk input dan juga untuk textareas:

<input type="text" ... >
<textarea ... >...</textarea>

Lakukan seperti ini:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

Seperti yang saya katakan, tidak semua cara untuk Menempelkan peristiwa di semua browser ... terburuk beberapa tidak memadamkan acara sama sekali, tetapi Timer mengerikan untuk digunakan untuk itu.

Tetapi sebagian besar cara Tempel dilakukan dengan keyboard dan / atau mouse, jadi biasanya onkeyup atau onmouseup dipecat setelah ditempelkan, juga onkeyup dipecat saat mengetik pada keyboard.

Pastikan kode cek Anda tidak membutuhkan banyak waktu ... jika tidak, pengguna akan mendapatkan impresi yang buruk.

Ya, triknya adalah menembakkan kunci dan mouse ... tapi waspadalah keduanya dapat dipecat, jadi ingatlah seperti itu !!!

Tolong, nilai pendekatan berikutnya menggunakan JQuery:

HTML:

<input type="text" id="inputId" />

Javascript (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});

"input" bekerja untuk saya.

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

Anda bisa menggunakan keydown, keyupdan keypressacara juga.

Untuk melacak setiap coba contoh ini dan sebelum itu benar-benar mengurangi kursor berkedip ke nol.

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur: event menghasilkan saat keluar

onchange: event menghasilkan saat keluar jika ada perubahan yang dibuat pada inputtext

onkeydown: event menghasilkan pada sembarang tombol tekan (untuk tahan lama juga)

onkeyup: event menghasilkan pada setiap rilis kunci

onkeypress: sama seperti onkeydown (atau onkeyup) tetapi tidak akan bereaksi untuk ctrl, backsace, alt lainnya

2018 di sini, inilah yang saya lakukan:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

Jika Anda bisa menunjukkan kelemahan dalam pendekatan ini, saya akan berterima kasih.

Metode 1: Tambahkan pendengar acara untuk input:

element.addEventListener("input", myFunction);

Metode 2: Tentukan oninputproperti dengan JavaScript:

element.oninput = function()
{
    myFunction();
};

Metode 3: Tentukan oninputproperti dengan HTML:

<input type="text" oninput="myFunction();">

Robert Siemer addEventListener tidak didukung di IE8.

"Versi IE yang lebih lama mendukung metode EventTarget.attachEvent () yang setara dan eksklusif." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener