你所问问题的确切解决方案是:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

但是我猜想，您试图在输入中显示“请输入用户ID”作为占位符或提示。 因此，您可以使用以下更有效的解决方案:

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

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

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

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

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

你可以使用文档。execCommand(所有主要浏览器都支持)

document.execCommand("selectall", null, false);

选择当前聚焦元素中的所有文本。

更新2021:execCommand现在已弃用。

说实话，这可能是最好的选择，因为它是一个老的IE API，已经被其他浏览器采用了，使用它总是有点奇怪。尽管如此，有一个解决方案可以同时处理<input>字段和可满足元素就很好了。

.select()可能是目前<input>字段的最佳方式。

对于contenteditable，现代的解决方案是使用range API。

你可以替换

<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。占位符使它不是一个值，但顾名思义，它是一个占位符。这就是在许多在线表单中使用的“用户名在这里”或“电子邮件”，当你点击它时，“电子邮件”消失，你可以立即开始输入。

Try:

onclick="this.select()"

这对我来说很有效。

实际上，可以使用onclick="this.select();"，但记住不要将其与disabled="disabled"结合使用——这样就不能工作了，你仍然需要手动选择或多点点击来选择。如果希望锁定要选择的内容值，请结合属性readonly。