html <input type = “text” /> acara onchange tidak berfungsi

Saya mencoba melakukan eksperimen. Apa yang saya ingin terjadi adalah setiap kali pengguna mengetik sesuatu di kotak teks, itu akan ditampilkan di kotak dialog. Saya menggunakan onchangeproperti acara untuk mewujudkannya tetapi tidak berhasil. Saya masih perlu menekan tombol kirim untuk membuatnya berfungsi. Saya membaca tentang AJAX dan saya berpikir untuk mempelajarinya. Apakah saya masih memerlukan AJAX untuk membuatnya berfungsi atau cukup dengan JavaScript sederhana? Tolong bantu.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

onchangehanya dipicu saat kontrol diburamkan. Coba onkeypresssaja.

Menggunakan .on('input'... untuk memantau setiap perubahan pada input (paste, keyup, dll) dari jQuery 1.7 ke atas.

Untuk input statis dan dinamis:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

Hanya untuk input statis:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle dengan contoh statis / dinamis: https://jsfiddle.net/op0zqrgy/7/

Memeriksa penekanan tombol hanyalah solusi parsial, karena dimungkinkan untuk mengubah konten bidang input menggunakan klik mouse. Jika Anda mengklik kanan pada bidang teks, Anda akan mendapatkan opsi potong dan tempel yang dapat Anda gunakan untuk mengubah nilai tanpa menekan tombol. Demikian juga, jika pelengkapan otomatis diaktifkan, Anda dapat mengklik kiri ke dalam bidang dan mendapatkan dropdown dari teks yang dimasukkan sebelumnya, dan Anda dapat memilih di antara pilihan Anda menggunakan klik mouse. Jebakan keystroke tidak akan mendeteksi salah satu dari jenis perubahan ini.

Sayangnya, tidak ada peristiwa "perubahan" yang melaporkan perubahan dengan segera, setidaknya sejauh yang saya tahu. Namun ada solusi yang berfungsi untuk semua kasus: menyiapkan peristiwa waktu menggunakan setInterval ().

Misalkan bidang masukan Anda memiliki id dan nama "kota":

<input type="text" name="city" id="city" />

Memiliki variabel global bernama "kota":

var city = "";

Tambahkan ini ke inisialisasi halaman Anda:

setInterval(lookForCityChange, 100);

Kemudian tentukan fungsi lookForCityChange ():

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

Dalam contoh ini, nilai "city" dicentang setiap 100 milidetik, yang dapat Anda sesuaikan sesuai kebutuhan. Jika Anda mau, gunakan fungsi anonim alih-alih mendefinisikan lookForCityChange (). Ketahuilah bahwa kode Anda atau bahkan browser mungkin memberikan nilai awal untuk bidang masukan sehingga Anda mungkin diberi tahu tentang "perubahan" sebelum pengguna melakukan sesuatu; sesuaikan kode Anda seperlunya.

Jika gagasan kejadian waktu yang terjadi setiap sepersepuluh detik tampak canggung, Anda dapat memulai pengatur waktu saat bidang input menerima fokus dan menghentikannya (dengan clearInterval ()) saat kabur. Saya rasa tidak mungkin mengubah nilai bidang input tanpa menerima fokus, jadi menyalakan dan mematikan pengatur waktu dengan cara ini seharusnya aman.

HTML5 mendefinisikan oninputacara untuk menangkap semua perubahan langsung. itu berhasil untuk saya.

onchange hanya terjadi ketika perubahan pada elemen input dilakukan oleh pengguna, seringkali terjadi ketika elemen kehilangan fokus.

jika Anda ingin fungsi Anda oninputaktif setiap kali nilai elemen berubah, Anda harus menggunakan peristiwa - ini lebih baik daripada peristiwa kunci naik / turun karena nilainya dapat diubah dengan mouse pengguna yaitu ditempelkan, atau pengisian otomatis, dll.

Baca lebih lanjut tentang acara perubahan di sini

Baca lebih lanjut tentang acara masukan di sini

gunakan acara berikut, bukan "onchange"

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

Pertama, apa yang 'tidak berhasil'? Apakah Anda tidak melihat peringatan?

Selain itu, kode Anda dapat disederhanakan untuk ini

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

Saya mengalami masalah saat Safari tidak mengaktifkan peristiwa "onchange" pada bidang masukan teks. Saya menggunakan acara "perubahan" jQuery 1.7.2 dan tidak berhasil juga. Saya akhirnya menggunakan acara textchange ZURB. Ia bekerja dengan mouseevents dan dapat menyala tanpa meninggalkan lapangan:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

Beberapa komentar bahwa IMO penting:

• elemen input tidak memancarkan peristiwa 'perubahan' hingga tindakan PENGGUNA ENTER atau blur menunggu IS berperilaku benar .

• Acara yang ingin Anda gunakan adalah "input"(" oninput "). Di sini ditunjukkan dengan baik perbedaan antara keduanya: https://javascript.info/events-change-input

• Kedua peristiwa tersebut menandakan dua gerakan / momen pengguna yang berbeda (peristiwa "input" berarti pengguna sedang menulis atau menavigasi opsi daftar pilihan, tetapi masih tidak mengonfirmasi perubahan. "Ubah" berarti pengguna memang mengubah nilai (dengan enter atau blur kami)

• Mendengarkan peristiwa penting seperti yang direkomendasikan di sini adalah praktik yang buruk dalam kasus ini. (seperti orang yang mengubah perilaku default ENTER pada input) ...

• jQuery tidak ada hubungannya dengan ini. Ini semua dalam standar HTML.

• Jika Anda kesulitan memahami MENGAPA perilaku ini benar, mungkin berguna, sebagai percobaan, gunakan editor teks atau browser Anda tanpa mouse / pad, cukup keyboard.

Dua sen saya.

onkeyup bekerja untuk saya. onkeypress tidak terpicu saat menekan spasi.

Lebih baik digunakan onchange(event)dengan <select>. Dengan <input>Anda dapat menggunakan acara di bawah ini:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

coba onpropertychange. ini hanya berfungsi untuk IE.