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：这与 在此处输入链接描述 不同，因为它只是获取插入符号位置，而我正在寻找设置插入符号位置。

原文由 Bijan 发布，翻译遵循 CC BY-SA 4.0 许可协议

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">

原文由 Ben Botvinick 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Guillaume Georges 发布，翻译遵循 CC BY-SA 4.0 许可协议