Jquery Set Cursor To Beginning Of Input Field On Focus

February 25, 2024 Post a Comment

I have an input field and I want to make it so when a user focuses on this field, it will move the cursor to

Solution 1:

This will bind the focus AND click events of the input field to the function. Hope this helps!

$('#email').on('focus click', function() {
  $(this)[0].setSelectionRange(0, 0);
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text"placeholder="Enter your name"autofocus><inputtype="text"id="email"value="@website.com">

Or, without jQuery...

document.getElementById('email').addEventListener('click', moveCursor);
document.getElementById('email').addEventListener('focus', moveCursor);

functionmoveCursor(event) {
   event.target.setSelectionRange(0, 0);
}

<inputtype="text"placeholder="Enter your name"autofocus><inputtype="text"id="email"value="@website.com">

Solution 2:

Do you really need jQuery for this?

document.getElementById("email").addEventListener("click", moveCursor);
document.getElementById("email").addEventListener("focus", moveCursor);

functionmoveCursor(event) {
    event.target.setSelectionRange(0,0);
}

<inputvalue="@website.com"type="text"name="email"id="email"></input>

Solution 3:

Whatever you want to perform with a cursor needs a field focus anyway.

Baca Juga

Here is an old chunk I use. I even named it cursor.js in a sub-directory... I took it from many places I guess.

It's a get/set cursor position. It takes a JS element. .oO($(el)[0] for syntax loose..)

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)var isFirefox = typeofInstallTrigger !== 'undefined';   // Firefox 1.0+var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"var isChrome = !!window.chrome && !isOpera;              // Chrome 1+var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6functionGetCursorPos (field) {

  // Initialize
  iCaretPos = 0;

  if (isIE){

    // Set focus on the element
    field.focus();

    // To get cursor position, get empty selection range
    oSel = field.createTextRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -field.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  if (isChrome||isSafari){
    iCaretPos = field.selectionStart;
  }

  if (isFirefox){
    iCaretPos = field.selectionStart;
  }

  return iCaretPos;
}

functionSetCursorPos (field,Pos) {

  // Set focus on the element
    field.focus();

  if (isIE){
    field.selectionStart=Pos;
  }

  if (isChrome||isSafari){
    field.setSelectionRange(Pos,Pos);
  }

  if (isFirefox){
    field.selectionStart=Pos;
  }

  return;
}