我有以下代码在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(你必须把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>

其他回答

使用占位符="请输入用户ID"而不是value="请输入用户ID"是这种情况下的最佳方法,但该函数在某些情况下可能有用。

<input>元素已经可以监听焦点事件。我们可以将事件监听器添加到它而不是文档中,并且不需要再监听单击。

纯JavaScript:

document.getElementById("userid").addEventListener("focus", function() {
    this.select();
});

JQuery:

$("#userid").on("focus", function() {
    this.select();
});

你可以用这个。setSelectionRange(0, this.value.length)而不是this.select()取决于你的目的,但这将不适用于某些输入类型,如number。

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

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

和javascript代码没有绑定

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

Try:

onclick="this.select()"

这对我来说很有效。

你可以替换

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

:

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

占位符用来替换值,就像你希望人们能够在文本框中键入而无需多次单击或使用ctrl + a。占位符使它不是一个值,但顾名思义,它是一个占位符。这就是在许多在线表单中使用的“用户名在这里”或“电子邮件”,当你点击它时,“电子邮件”消失,你可以立即开始输入。