如何在输入字段中将光标移动到特定值之前？

Question

我在@gmail.com之后的字段中将光标移到末尾，但我想在@gmail.com之前插入光标。我该怎么办？

HTML：

<input type="email" name="email" id="email" value="{{vals}}" ng-click="val()">

AngularJS：

$scope.val = function(){
    $scope.vals = "@gmail.com";
};

Answer 1

好吧，您可以使用setSelectionRange，但不适用于输入type="email"。

如果您不介意使用type="name"（这意味着您必须自己验证输入内容是否是有效的电子邮件），请尝试以下操作：

<input type="name" id="email" value="@gmail.com" onclick="val()">

<script>
  const emailInput = document.getElementById("email")

  const val = () => {
    emailInput.setSelectionRange(0, 0)
  }
</script>

请注意，这是一个纯JavaScript解决方案。

有关setSelectionRange的更多信息，请参见MDN Web API Reference - setSelectionRange。