你可以替换

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

:

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

占位符用来替换值，就像你希望人们能够在文本框中键入而无需多次单击或使用ctrl + a。占位符使它不是一个值，但顾名思义，它是一个占位符。这就是在许多在线表单中使用的“用户名在这里”或“电子邮件”，当你点击它时，“电子邮件”消失，你可以立即开始输入。

使用占位符="请输入用户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。

在输入字段中使用“占位符”而不是“值”。

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

在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.
    });
});

我正在寻找一个css唯一的解决方案，发现这适用于iOS浏览器(测试safari和chrome)。

它在桌面chrome上没有相同的行为，但选择的痛苦没有那么大，因为作为用户，你有更多的选项(双击，ctrl-a等):

.select-all-on-touch {
    -webkit-user-select: all;
    user-select: all;
}

If you are just trying to have placeholder text that gets replaced when a user selects the element then it is obviously best practice to use placeholder attribute nowadays. However, if you want to select all of the current value when a field gains focus then a combination of @Cory House and @Toastrackenigma answers seems to be most canonical. Use focus and focusout events, with handlers that set/release the current focus element, and select all when focused. An angular2/typescript example is as follows (but would be trivial to convert to vanilla js):

模板:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

组件:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};