Saya memiliki input text
di jQuery, saya ingin tahu apakah mungkin untuk mendapatkan nilai dari input text
(type=number
dan type=text
) sebelum onchange
terjadi dan juga mendapatkan nilai dari input text yang sama setelah onchange terjadi. Ini menggunakan jQuery.
Apa yang saya coba:
Saya mencoba menyimpan nilai pada variabel kemudian memanggil nilai itu di dalam onchange tetapi saya mendapatkan nilai kosong.
Cara paling sederhana adalah menyimpan nilai asli menggunakan data()
ketika elemen mendapat fokus. Berikut ini adalah contoh yang sangat mendasar:
JSFiddle:
$('input').on('focusin', function(){
console.log("Saving value " + $(this).val());
$(this).data('val', $(this).val());
});
$('input').on('change', function(){
var prev = $(this).data('val');
var current = $(this).val();
console.log("Prev value " + prev);
console.log("New value " + current);
});
Catatan: secara umum lebih efisien menggunakan penangan peristiwa yang didelegasikan ketika ada beberapa elemen yang cocok. Dengan cara ini hanya satu penangan yang ditambahkan (overhead lebih kecil dan inisialisasi lebih cepat) dan perbedaan kecepatan pada waktu kejadian dapat diabaikan.
Berikut ini adalah contoh yang sama dengan menggunakan event yang didelegasikan yang terhubung ke dokumen
:
$(document).on('focusin', 'input', function(){
console.log("Saving value " + $(this).val());
$(this).data('val', $(this).val());
}).on('change','input', function(){
var prev = $(this).data('val');
var current = $(this).val();
console.log("Prev value " + prev);
console.log("New value " + current);
});
JsFiddle:
65/Delegated event bekerja dengan mendengarkan event (focusin
, change
dll) pada elemen leluhur (document
dalam kasus ini), kemudian menerapkan filter jQuery (input
) hanya pada elemen-elemen dalam rantai gelembung kemudian menerapkan fungsi hanya pada elemen-elemen yang cocok yang menyebabkan event*.
Catatan: Aturan umum, gunakan document
sebagai default untuk event yang didelegasikan dan bukan body
. body
memiliki bug, yang berkaitan dengan styling, yang dapat menyebabkannya tidak mendapatkan event mouse yang digelembungkan. Juga document
selalu ada sehingga Anda dapat melampirkannya di luar DOM ready handler* :)
Tentunya Anda perlu menyimpan nilai lama secara manual, tergantung pada saat apa Anda tertarik (sebelum fokus, dari perubahan terakhir). Nilai awal bisa diambil dari properti defaultValue:
function onChange() {
var oldValue = this.defaultValue;
var newValue = this.value;
}
Nilai sebelum pemfokusan dapat diambil seperti yang ditunjukkan dalam jawaban Gone Coding's. Tetapi Anda harus ingat bahwa nilai dapat diubah tanpa pemfokusan.
solusi saya ada di sini
function getVal() {
var $numInput = $('input');
var $inputArr = [];
for(let i=0; i < $numInput.length ; i++ )
$inputArr[$numInput[i].name] = $numInput[i].value;
return $inputArr;
}
var $inNum = getVal();
$('input').on('change', function() {
// inNum is last Val
$inNum = getVal();
// in here we update value of input
let $val = this.value;
});