单击时选择 HTML 文本输入中的所有文本

Question

我有以下代码在 HTML 网页中显示文本框。

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

当页面显示时，文本包含 请输入用户 ID 消息。但是，我发现用户需要单击 3 次才能选择所有文本（在这种情况下是 Please enter the user ID ）。

是否可以一键选择整个文本？

编辑：

对不起，我忘了说：我必须使用输入 type="text"

原文由 Questions 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以 对 HTMLElement 使用 JavaScript .select() 方法：

 <label for="userid">User ID</label>
 <input onClick="this.select();" value="Please enter the user ID" id="userid" />

但显然它不适用于移动 Safari。在这些情况下，您可以使用：

 <input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" id="userid" />

原文由 Boris Pavlović 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

先前发布的解决方案有两个怪癖：

1. 在 Chrome 中，通过 .select() 进行的选择不固定 - 添加轻微的超时可以解决此问题。
2. 不可能将光标放在焦点后的所需位置。

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

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

原文由 Cory House 发布，翻译遵循 CC BY-SA 4.0 许可协议