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

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

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

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

编辑:

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


当前回答

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

其他回答

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

Try:

onclick="this.select()"

这对我来说很有效。

如果你正在寻找一个纯粹的javascript方法,你也可以使用:

document.createRange().selectNodeContents( element );

这将选择所有的文本,所有主流浏览器都支持。

要触发焦点上的选择,你只需要像这样添加事件监听器:

document.querySelector( element ).addEventListener( 'focusin', function () {

    document.createRange().selectNodeContents( this );

} );

如果你想把它内联到你的HTML中,你可以这样做:

<input type="text" name="myElement" onFocus="document.createRange().selectNodeContents(this)'" value="Some text to select" />

这只是另一种选择。似乎有几种方法可以做到这一点。(这里也提到了document.execCommand("selectall"))

document.querySelector(“# myElement1”)。addEventListener('focusin', function() { .selectNodeContents document.createRange () (); }); </p> .</p> .</p> .</p>单击字段内将不会触发选择,但单击标签进入字段将触发选择 <label for="">JS文件示例<label><br> <input id="myElement1" value="This is some text" /><br> . < br > <label for="">内联示例</label><br> <input id="myElement2" value="This also is some text" onfocus="document.createRange()。selectNodeContents(this);"/>

在输入字段中使用“占位符”而不是“值”。

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

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

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

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

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