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

javascript html textinput

2022-08-29 22:37:22

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

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

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

是否可以只需单击一下即可选择整个文本？

编辑：

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

答案 1

你可以将 JavaScript .select（） 方法用于 HTMLElement：

<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" />

答案 2

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

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