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

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

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

当页面显示时，文本包含“请输入用户ID”消息。但是，我发现用户需要单击3次才能选择所有文本(在本例中是Please enter the user ID)。

是否可以只点击一下就选择整个文本?

编辑:

抱歉，我忘了说:我必须使用input type="text"

当前回答

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

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

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

更新2021:execCommand现在已弃用。

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

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

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

其他回答

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

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

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

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

当.select()在移动平台上不起作用时，这个问题有选项:在iOS设备(移动Safari)上以编程方式选择输入字段中的文本

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

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

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

这是一个正常的文本框活动。

单击“1 -设置焦点”

点击2/3(双击)-选择文本

您可以在页面第一次加载时将焦点设置在文本框上，以减少“选择”为单个双击事件。

像这样的Html <input type="text" value="点击输入选择" onclick="javascript:textSelector(this)" / >

和javascript代码没有绑定

function textSelector(ele){
    $(ele).select();
}

推荐文章