我有以下代码在 HTML 网页中显示文本框。
<input type="text" id="userid" name="userid" value="Please enter the user ID" />
当页面显示时，文本包含请输入用户 ID消息。但是，我发现用户需要单击 3 次才能选择所有文本（在本例中为Please enter the user ID）。
是否可以一键选择整个文本？
编辑：
对不起，我忘了说：我必须使用输入 type="text"
单击时选择 HTML 文本输入中的所有文本
IT技术
javascript
html
textinput
2021-02-10 21:05:00
6个回答
您可以使用此 javascript 代码段：
<input onClick="this.select();" value="Sample Text" />
但显然它不适用于移动 Safari。在这些情况下，您可以使用：
<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
之前发布的解决方案有两个怪癖：
- 在 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.
});
});
Html（您必须将 onclick 属性放在您希望它在页面上工作的每个输入上）
<input type="text" value="click the input to select" onclick="this.select();"/>
或更好的选择
jQuery（这将适用于页面上的每个文本输入，无需更改您的 html）：
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click','input[type=text]',function(){ this.select(); });
});
</script>
我知道这是旧的，但最好的选择是现在placeholder尽可能使用新的HTML 属性：
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
这将导致文本显示，除非输入值，从而无需选择文本或清除输入。
您可以随时使用document.execCommand（所有主要浏览器都支持）
document.execCommand("selectall", null, false);
选择当前焦点元素中的所有文本。
2021 年更新：execCommand现已弃用。
老实说，这可能是最好的，因为它是其他浏览器采用的旧 IE API，使用它总是有点奇怪。尽管如此，拥有一种同时适用于<input>字段和contenteditable元素的解决方案还是很好的。
.select()可能是<input>这些天去田野的最佳方式。
对于contenteditable，现代解决方案是使用范围 API。