之前发布的解决方案有两个怪癖:

在Chrome中，通过.select()选择不粘-添加一个轻微的超时解决了这个问题。 不可能在聚焦后将光标放置在所需的点上。

这里有一个完整的解决方案，选择焦点上的所有文本，但允许在焦点后选择特定的游标点。

$(function () {
    var focusedElement;
    $(document).on('focus', 'input', function () {
        if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
        focusedElement = this;
        setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
    });
});

用这个:

var textInput = document.querySelector（“input”）; textInput.onclick = function（） { 文本输入选择开始 = 0; textInput.selectionEnd = textInput.value.length; } <输入类型=“文本”>

您不应该再使用这种方法为输入值提供示例。

最好的选择是现在使用占位符HTML属性，如果可能的话:

<label for="userid">User ID</label>
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

这将导致文本显示，除非输入值，消除了选择文本或清除输入的需要。

请注意占位符不能代替标签，因为一旦输入文本，占位符就会消失，并对可访问性造成问题。

我在vue应用程序中使用焦点属性

<input @focus="$event.target.select()" />

Try:

onclick="this.select()"

这对我来说很有效。

使用占位符="请输入用户ID"而不是value="请输入用户ID"是这种情况下的最佳方法，但该函数在某些情况下可能有用。

<input>元素已经可以监听焦点事件。我们可以将事件监听器添加到它而不是文档中，并且不需要再监听单击。

纯JavaScript:

document.getElementById("userid").addEventListener("focus", function() {
    this.select();
});

JQuery:

$("#userid").on("focus", function() {
    this.select();
});

你可以用这个。setSelectionRange(0, this.value.length)而不是this.select()取决于你的目的，但这将不适用于某些输入类型，如number。