代码之家 › 专栏 › 技术社区 › Bijan

jquery将光标设置为焦点上输入字段的开头

focus jquery javascript

Bijan · 技术社区 · 8 年前

我有一个输入字段 <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);
});

当我进入字段时,它会将光标设置为开始,但当我单击时不会。

编辑2:这与 enter link description here 因为这只是得到插入符号的位置,而我正在寻找设置插入符号的位置。

3 回复 | 直到 8 年前

Ben Botvinick 8 年前

这将绑定 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">

Guillaume Georges 8 年前

你真的需要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>

Louys Patrice Bessette 8 年前

不管你想用光标执行什么,都需要一个字段焦点。

这是我用的一块旧的。我甚至给它起了名字 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;
}

关于浏览器友好的注意事项,有:

.selectionStart --chrome/safari/firefox浏览器
.setSelectionRange(Pos,Pos) --chrome/safari/firefox/internet explorer浏览器
.createTextRange() --Internet资源管理器

我很久以前在这里用过的一个灵感: partial (compared to the above) SO answer