单击时选择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"

当前回答

您不应该再使用这种方法为输入值提供示例。

最好的选择是现在使用占位符HTML属性，如果可能的话:

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

这将导致文本显示，除非输入值，消除了选择文本或清除输入的需要。

请注意占位符不能代替标签，因为一旦输入文本，占位符就会消失，并对可访问性造成问题。

其他回答

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

单击“1 -设置焦点”

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

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

您不应该再使用这种方法为输入值提供示例。

最好的选择是现在使用占位符HTML属性，如果可能的话:

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

这将导致文本显示，除非输入值，消除了选择文本或清除输入的需要。

请注意占位符不能代替标签，因为一旦输入文本，占位符就会消失，并对可访问性造成问题。

我在vue应用程序中使用焦点属性

<input @focus="$event.target.select()" />

注意:当你考虑onclick="this.select()"时，在第一次点击时，所有字符都会被选中，之后可能你想在输入中编辑一些东西，然后再次点击字符，但它会再次选中所有字符。要解决这个问题，你应该使用onfocus而不是onclick。

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

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

推荐文章