我有以下代码在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"
当前回答
Try:
onclick="this.select()"
这对我来说很有效。
其他回答
捕获单击事件的问题是,文本中的每次后续单击都将再次选择它,而用户可能希望重新定位光标。
对我有用的是声明一个变量selectSearchTextOnClick,并在默认情况下将其设置为true。点击处理程序检查变量是否仍然为true:如果为true,则将其设置为false并执行select()。然后我有一个模糊事件处理程序,将其设置为true。
到目前为止,结果似乎是我所期望的。
(编辑:我忘了说我曾尝试按照某人的建议捕获焦点事件,但这不起作用:焦点事件触发后,点击事件可以触发,立即取消选择文本)。
如果你正在使用AngularJS,你可以使用一个自定义指令来方便访问:
define(['angular'], function () {
angular.module("selectionHelper", [])
.directive('selectOnClick', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function () {
this.select();
});
}
};
});
});
现在你可以这样使用它:
<input type="text" select-on-click ... />
这个示例带有requirejs -所以如果使用其他内容,可以跳过第一行和最后一行。
如果有人想在页面加载w/ jQuery(甜蜜的搜索字段)这是我的解决方案
jQuery.fn.focusAndSelect = function() {
return this.each(function() {
$(this).focus();
if (this.setSelectionRange) {
var len = $(this).val().length * 2;
this.setSelectionRange(0, len);
} else {
$(this).val($(this).val());
}
this.scrollTop = 999999;
});
};
(function ($) {
$('#input').focusAndSelect();
})(jQuery);
基于这篇文章。感谢CSS-Tricks.com
当.select()在移动平台上不起作用时,这个问题有选项:在iOS设备(移动Safari)上以编程方式选择输入字段中的文本
如果你正在寻找一个纯粹的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);"/>