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

这会将输入字段的focusAND 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">