Cara memindahkan kursor secara otomatis di javascript

Kami menggunakan setSelectionRange untuk mengatur posisi awal dan akhir pemilihan teks saat ini di elemen input

Dua parameter yang kami berikan ke metode setSelectionRange adalah

1. selectionStart - indeks berbasis nol dari karakter yang dipilih pertama

2. 
   
     
       bobbyhadz.com
       
     
   
     
       
   
       Move cursor to beginning
   
       
     
   
   

   0 - indeks karakter berbasis nol setelah karakter yang dipilih terakhir

Indeks yang lebih besar dari panjang nilai input menunjuk ke akhir nilai

Langkah terakhir adalah memanggil metode focus() pada elemen

Metode focus memindahkan kursor ke elemen tempat metode dipanggil

Idenya adalah untuk tidak memilih teks sama sekali, tetapi memindahkan kursor ke akhir nilai input dan memfokuskannya

Pindahkan kursor ke AKHIR bidang input saat tombol diklik

Untuk memindahkan kursor ke ujung kolom input saat tombol diklik

1. Tambahkan pendengar acara

   
   
     
       bobbyhadz.com
       
     
   
     
       
   
       Move cursor to beginning
   
       
     
   
   

   2 ke elemen tombol
2. Setiap kali tombol diklik, panggil metode setSelectionRange() pada elemen input
3. Panggil metode focus()_ untuk memindahkan kursor ke ujung kolom input

Setiap kali tombol diklik, fungsi

  
    bobbyhadz.com
    
  

  
    

    Move cursor to beginning

    
  

1. Setel pemilihan teks di kolom input ke posisi setelah karakter terakhirnya
2. Fokuskan elemennya

Pindahkan Kursor ke AWAL bidang Input menggunakan JS

Untuk memindahkan kursor ke awal bidang input

1. Gunakan metode setSelectionRange()_ untuk memindahkan kursor ke awal kolom input
2. Panggil metode focus()_ pada elemen input
3. Metode focus_ akan memindahkan kursor ke awal nilai elemen

Berikut adalah HTML untuk contohnya

  
    bobbyhadz.com
    
  

  
    

    Move cursor to beginning

    
  

Dan inilah kode JavaScript terkait

Kami menggunakan metode setSelectionRange untuk mengatur posisi awal dan akhir pemilihan teks saat ini di elemen input

Dua argumen yang kami sampaikan ke metode setSelectionRange adalah

1. selectionStart - indeks berbasis nol dari karakter yang dipilih pertama

2. 
   
     
       bobbyhadz.com
       
     
   
     
       
   
       Move cursor to beginning
   
       
     
   
   

   0 - indeks karakter berbasis nol setelah karakter yang dipilih terakhir

Langkah terakhir adalah memanggil metode focus() pada elemen

Metode focus memindahkan kursor ke elemen tempat metode dipanggil

Idenya adalah untuk tidak memilih teks sama sekali, tetapi memindahkan kursor ke awal nilai masukan dan memfokuskannya

Pindahkan kursor ke AWAL atau kolom input pada klik tombol

Untuk memindahkan kursor ke awal kolom input saat tombol diklik

1. Tambahkan pendengar acara

   
   
     
       bobbyhadz.com
       
     
   
     
       
   
       Move cursor to beginning
   
       
     
   
   

   2 ke elemen tombol
2. Setiap kali tombol diklik, panggil metode setSelectionRange() pada elemen input
3. Panggil metode focus()_ untuk memindahkan kursor ke awal kolom input

const input = document.getElementById('first_name');

const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  input.setSelectionRange(0, 0);
  input.focus();
});

Setiap kali tombol diklik, fungsi

  
    bobbyhadz.com
    
  

  
    

    Move cursor to beginning

    
  

1. Setel pemilihan teks di kolom input ke posisi sebelum karakter pertamanya
2. Fokuskan elemennya

Atur Kursor di Akhir Textarea menggunakan JavaScript

Untuk mengatur kursor di akhir textarea

1. Gunakan metode setSelectionRange()_ untuk mengatur posisi pemilihan teks saat ini ke akhir textarea
2. Panggil metode focus()_ pada elemen textarea
3. Metode focus_ akan memindahkan kursor ke akhir nilai elemen

Berikut adalah HTML untuk contoh dalam artikel ini

  
    
    bobbyhadz.com
  

  
    

    Move cursor to beginning

    
  

Dan inilah kode JavaScript terkait

Kami menggunakan setSelectionRange untuk mengatur posisi awal dan akhir pemilihan teks saat ini di elemen

  
    
    bobbyhadz.com
  

  
    

    Move cursor to beginning

    
  

Dua parameter yang kami berikan ke metode setSelectionRange adalah

1. selectionStart - indeks berbasis nol dari karakter yang dipilih pertama

2. 
   
     
       bobbyhadz.com
       
     
   
     
       
   
       Move cursor to beginning
   
       
     
   
   

   0 - indeks karakter berbasis nol setelah karakter yang dipilih terakhir

Indeks yang lebih besar dari panjang nilai textarea menunjuk ke akhir nilai

Langkah terakhir adalah memanggil metode focus() pada elemen

Elemen focus memindahkan kursor ke elemen tempat metode dipanggil

Idenya adalah untuk tidak memilih teks sama sekali, tetapi memindahkan kursor ke akhir nilai textarea dan memfokuskannya

Atur kursor di akhir textarea saat tombol diklik

Untuk mengatur kursor di akhir textarea saat tombol diklik

1. Tambahkan pendengar acara

   
   
     
       bobbyhadz.com
       
     
   
     
       
   
       Move cursor to beginning
   
       
     
   
   

   2 ke elemen tombol
2. Setiap kali tombol diklik, panggil metode setSelectionRange() pada elemen textarea
3. Panggil metode focus()_ untuk memindahkan kursor ke ujung textarea

Setiap kali tombol diklik, fungsi

  
    bobbyhadz.com
    
  

  
    

    Move cursor to beginning

    
  

1. Setel pemilihan teks di textarea ke posisi setelah karakter terakhirnya
2. Fokuskan elemennya

Perhatikan bahwa kita mendapatkan setSelectionRange()_0 dari nilai elemen tepat saat tombol diklik. Ini memastikan bahwa nilai dalam variabel setSelectionRange()_1 akan selalu terkini

Bagaimana cara memindahkan kursor ke input javascript berikutnya?

Bagaimana cara mendapatkan posisi kursor di JavaScript?

Bagaimana cara membuat kursor saya bergerak secara otomatis tanpa mouse?