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

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

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

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

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

捕获单击事件的问题是，文本中的每次后续单击都将再次选择它，而用户可能希望重新定位光标。

对我有用的是声明一个变量selectSearchTextOnClick，并在默认情况下将其设置为true。点击处理程序检查变量是否仍然为true:如果为true，则将其设置为false并执行select()。然后我有一个模糊事件处理程序，将其设置为true。

到目前为止，结果似乎是我所期望的。

(编辑:我忘了说我曾尝试按照某人的建议捕获焦点事件，但这不起作用:焦点事件触发后，点击事件可以触发，立即取消选择文本)。

Try:

onclick="this.select()"

这对我来说很有效。

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

注意:当你考虑onclick="this.select()"时，在第一次点击时，所有字符都会被选中，之后可能你想在输入中编辑一些东西，然后再次点击字符，但它会再次选中所有字符。要解决这个问题，你应该使用onfocus而不是onclick。

输入自动聚焦，onfocus事件:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

这样就可以打开选中所需元素的表单。它的工作原理是使用自动聚焦来命中输入，然后发送自己一个onfocus事件，该事件反过来选择文本。