Saya ingin beralih kembali ke kotak teks sebelumnya ketika kotak teks saat ini kosong.

Saya dapat pergi ke kotak teks berikutnya ketika kotak teks saat ini terisi tetapi saya tidak dapat kembali ketika saya menghapus karakter (panjang == 0) ke dalam kotak teks.

Ini kotak teks saya:

<input id="txt_1" type="number" maxlength="3" onKeyDown="if(event.KeyCode != 8){if(this.value.length == 3){window.setTimeout(function (){document.getElementById('txt_2').focus();},0);return false;}}">
<input id="txt_2" type="number" maxlength="3" onKeyDown="if(event.KeyCode != 8){if(this.value.length == 3){window.setTimeout(function (){document.getElementById('txt_3').focus();},0);return false;}}">
<input id="txt_3" type="number" maxlength="3" onKeyDown="if(event.KeyCode != 8){if(this.value.length == 3){return false;}}">

Saya bisa pergi (mengisi) seperti:

txt_1 > txt_2 > txt_3

Saya tidak dapat kembali (saat dihapus) seperti:

txt_3 > txt_2 > txt_1
1
Hallowen 27 Oktober 2019, 13:00

2 jawaban

Jawaban Terbaik

Untuk mendapatkan nilai kotak teks saat Anda tiba di acara, Anda harus menggunakan acara keyup alih-alih keydown.dan itu akan bekerja untuk Anda, namun saya telah menyarankan solusi lain tanpa mengulangi kode untuk setiap elemen:

$('.forward').on('keydown', function(e){
       if($(this).val().length === 3 && e.which != 8) e.preventDefault();  
});
$('.forward').on('keyup', function(e){

     if($(this).val().length === 3)
     { if($(this).data('next')) $($(this).data('next')).focus();}
     if($(this).val() === '')
     {if($(this).data('back')) $($(this).data('back')).focus();}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="txt_1" type="number" maxlength="3" data-next="#txt_2" class="forward" />
<input id="txt_2" type="number" maxlength="3" data-next="#txt_3" data-back="#txt_1" class="forward" />
<input id="txt_3" type="number" maxlength="3" data-back="#txt_2" class="forward" />
1
Ashkan Mobayen Khiabani 27 Oktober 2019, 11:03

Anda dapat mencoba ini

if( $("#txt_1").val() === ''){
        $("#txt_1").focus();
        }
0
tebbe93 27 Oktober 2019, 11:37