Cara set posisi cursor di dalam element input dengan javascript

Sesuai dengan judul postingan di atas, kali ini kita akan mempelajari salah satu trik javascript untuk menset posisi cursor di element input.

Di dalam HTML terdapat element yang digunakan untuk melakkukan inputan seperti tag <input> dan <textarea>

Sebagai contoh kali ini, kita akan menggunakan tag <input> dengan type=”text”. Ketikkan kode di bawah pada texteditor kalian

<input type="text" id="teks" value="contoh teks">

Sekarang mari kita buat juga button yang akan digunakan untuk menjalankan function set cursor nanti

<button id="btn">Klik</button>

Berikutnya mari kita buat kode Javascriptnya

var btn = document.getElementById('btn');
var teksInput = document.getElementById('teks');

btn.addEventListener("click",function(){
  teksInput.focus();
  setCursorPosition(teksInput,3); //posisi cursor
});

function setCursorPosition(elem,pos){
  if (elem.setSelectionRange) {
    elem.setSelectionRange(pos, pos);
  } else if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

Pada kode javascript, function setCursorPosition() yang digunakan untuk menset posisi cursor.

Kode full nya akan menjadi seperti berikut

<input type="text" id="teks" value="contoh teks">
<button id="btn">Klik</button>

<script type="text/javascript">
  var btn = document.getElementById('btn');
  var teksInput = document.getElementById('teks');

  btn.addEventListener("click",function(){
    teksInput.focus();
    setCursorPosition(teksInput,3); //posisi cursor
  });

  function setCursorPosition(elem,pos){
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
</script>

Jika kalian suka menggunakan jquery, kodenya dapat menjadi seperti berikut

<input type="text" id="teks" value="contoh teks">
<button id="btn">Klik</button>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
  $('#btn').on("click",function(){
    $("#teks").focus();
    $("#teks").setCursorPosition(3);
  });


  $.fn.setCursorPosition = function(pos) {
    this.each(function(index, elem) {
      if (elem.setSelectionRange) {
        elem.setSelectionRange(pos, pos);
      } else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
      }
    });
    return this;
  };
</script>

Demo

Kode di atas merupakan contoh sederhana dari penggunaan trik javascript pada postingan kali ini.

Kalian bisa melakukan perubahan atau pengembangan sesuai kebutuhan project kalian