jQuery將光標設置為焦點輸入字段的開始

Question

我有一個輸入字段<input value="@website.com" type="text" name="email" id="email"> ，我想這樣做，以便當用戶專注於此字段時，它將移動光標位於@website.com之前。

我有以下Javascript / jQuery代碼，但它似乎不起作用：

$(document).ready(function() {
    $("#email").focusin(function(){
        $("#email").focus();
        $("#email")[0].setSelectionRange(0,0);
    });
});

似乎.focus()一直在調用focusin()函數。

我知道$("#email")[0].setSelectionRange(0,0); 將光標移到最前面的正確方法是什么，但是當字段具有焦點時如何將其綁定到？

編輯：所以當我使用：

$("#email").focus(function(){
    $("#email")[0].setSelectionRange(0,0);
});

當我跳到該字段時，它將光標設置在開始處，但在單擊時則不將其設置。

Edit2：這與在此處輸入鏈接描述不同，因為它只是獲得插入符位置，而我正在設置插入符位置。

Answer 1

這會將輸入字段的focus和click事件綁定到該函數。 希望這可以幫助！

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

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

或者，沒有jQuery ...

 document.getElementById('email').addEventListener('click', moveCursor); document.getElementById('email').addEventListener('focus', moveCursor); function moveCursor(event) { event.target.setSelectionRange(0, 0); } 

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

Answer 2

您是否真的需要jQuery？

 document.getElementById("email").addEventListener("click", moveCursor); document.getElementById("email").addEventListener("focus", moveCursor); function moveCursor(event) { event.target.setSelectionRange(0,0); } 

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

Answer 3

無論如何，您想要用光標執行的操作都需要聚焦。

這是我用的一個舊塊。 我什cursor.js在一個子目錄cursor.js其命名為cursor.js 。

這是獲取/設置光標的位置。 它需要一個JS元素。 .oO（ $(el)[0]表示語法松散..）

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== '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 IE6


function GetCursorPos (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;
}

function SetCursorPos (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;
}

關於瀏覽器友好的注意事項，有：

1. .selectionStart -Chrome / Safari / Firefox
2. .setSelectionRange(Pos,Pos) / Safari / Firefox / Internet Explorer
3. .createTextRange() -Internet Explorer

---

我很久以前就曾使用過一個靈感： 部分（與上述相比）SO答案