我有以下代码在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网页中显示一个文本框。
<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。占位符使它不是一个值,但顾名思义,它是一个占位符。这就是在许多在线表单中使用的“用户名在这里”或“电子邮件”,当你点击它时,“电子邮件”消失,你可以立即开始输入。