Bagaimana untuk membuat kandungan dalam kotak input secara automatik bergerak ke hadapan selepas memadamkan kursor dalam JS?

Apabila membangunkan aplikasi web, anda sering menghadapi senario di mana anda perlu mengendalikan kandungan kotak input. Antaranya, adalah keperluan biasa tetapi juga mencabar untuk memindahkan kandungan secara automatik dalam kotak input ke hadapan selepas memadamkan kursor.

Dalam artikel ini, kami akan memperkenalkan dua kaedah untuk mencapai keperluan ini: satu ialah menggunakan API Pemilihan JavaScript untuk melaksanakan operasi teks, dan satu lagi ialah mengubah hala kandungan secara automatik dalam kotak input ke kotak input dengan mensimulasikan acara papan kekunci.

Gunakan API Pemilihan untuk manipulasi teks

API Pemilihan ialah API manipulasi teks yang disediakan oleh JavaScript, yang boleh digunakan untuk mendapatkan dan memanipulasi bahagian teks yang dipilih pada dokumen. Dalam kaedah ini, kami akan menggunakan API Pemilihan untuk melaksanakan pemadaman dan penyalinan kandungan teks.

Pertama, kita perlu mendapatkan nod DOM kotak input dan mengikat pendengar acara kekunci padanya untuk mendengar acara papan kekunci. Apabila pengguna menekan kekunci Backspace atau Delete, kami akan melakukan operasi berikut:

1. Gunakan kaedah document.getSelection() untuk mendapatkan teks yang dipilih semasa
2. Jika teks yang dipilih kosong, kemudian Mewakili bahawa anda ingin memadam aksara sebelum kursor, tetapkan semula julat pemilihan kepada "lanjutkan" (iaitu, teks antara kedudukan kursor semasa dan kedudukan aksara sebelumnya) melalui kaedah modify() API Pemilihan, dan kemudian gunakan modify() sekali lagi Kaedah menetapkan semula julat pemilihan kepada "bergerak" (iaitu, memadam aksara sebelum kursor)
3. Jika tidak, ini bermakna pengguna telah memilih sebahagian daripada teks, salin teks yang dipilih ke papan keratan dan tetapkan julat pemilihan kepada "bergerak" untuk memadam teks yang dipilih
4. Akhir sekali, kemas kini nilai kotak input dan gerakkan kursor ke kedudukan yang betul

Berikut ialah pelaksanaan lengkap:

const inputField = document.getElementById('input-field');

inputField.addEventListener('keydown', (event) => {
  const selection = document.getSelection();

  if (event.key === 'Backspace' || event.key === 'Delete') {
    const selectedText = selection.toString();

    if (selectedText === '') {
      selection.modify('extend', 'backward', 'character');
      selection.modify('move', 'backward', 'character');
    } else {
      event.clipboardData.setData('text/plain', selectedText);
      selection.deleteFromDocument();
    }

    event.preventDefault();
    inputField.value = inputField.value.substring(0, selection.anchorOffset) + 
                       inputField.value.substring(selection.focusOffset);
    selection.setPosition(selection.anchorNode, selection.anchorOffset);
  }
});

Gunakan acara papan kekunci simulasi untuk melaksanakan

Kaedah pelaksanaan kedua ialah untuk mensimulasikan peristiwa papan kekunci untuk mencetuskan acara kekunci kekunci kotak input dan biarkan ia bergerak ke hadapan secara automatik. Kaedah ini tidak memerlukan penggunaan API Pemilihan dan berfungsi dalam semua penyemak imbas.

Pertama, kita perlu mencipta acara papan kekunci simulasi untuk mensimulasikan pengguna menekan kekunci Backspace atau Padam. Seterusnya, cetuskan acara keydown pada kotak input dan lakukan operasi berikut dalam pendengar acara:

1. Gunakan sifat selectionStart dan selectionEnd untuk mendapatkan julat teks yang dipilih pada masa ini. Jika tiada teks dipilih, pilih selectionStart and selectionEnd. kotak input dan berdasarkan kursor semasa Kedudukan menetapkan semula pemilihanMula dan pemilihanTamat
2. Kod pelaksanaan adalah seperti berikut:

Ringkasan

Artikel ini memperkenalkan dua kaedah untuk melaksanakan JavaScript untuk memadam kursor dan membenarkan input Kandungan kotak secara automatik bergerak ke hadapan. Kaedah pertama menggunakan API Pemilihan JavaScript untuk melaksanakan operasi teks, dan kaedah kedua dilaksanakan dengan mensimulasikan peristiwa papan kekunci. Kedua-dua kaedah mempunyai kelebihan dan kekurangan mereka sendiri, pilih mengikut keperluan sebenar dan keserasian pelayar.

const inputField = document.getElementById('input-field');

document.addEventListener('keydown', (event) => {
  const selectionStart = inputField.selectionStart;
  const selectionEnd = inputField.selectionEnd;

  if (event.key === 'Backspace') {
    inputField.value = inputField.value.substring(0, selectionStart - 1) + 
                       inputField.value.substring(selectionEnd);
    inputField.selectionStart = selectionStart - 1;
    inputField.selectionEnd = selectionStart - 1;
    event.preventDefault();
  } else if (event.key === 'Delete') {
    inputField.value = inputField.value.substring(0, selectionStart) + 
                       inputField.value.substring(selectionEnd + 1);
    inputField.selectionStart = selectionStart;
    inputField.selectionEnd = selectionStart;
    event.preventDefault();
  }
});

Atas ialah kandungan terperinci Bagaimana untuk membuat kandungan dalam kotak input secara automatik bergerak ke hadapan selepas memadamkan kursor dalam JS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!