我有以下代码在HTML网页中显示文本框。
<input type="text" id="userid" name="userid" value="Please enter the user ID" />
当页面显示时，文本包含请输入用户ID 消息。但是，我发现用户需要单击3次才能选择所有文本（在这种情况下，它是请输入用户ID ）。
只需点击一下即可选择整个文本吗？
修改
抱歉，我忘了说：我必须使用输入type="text"
答案 0 :(得分：798)
您可以使用此javascript代码段：
<input onClick="this.select();" value="Sample Text" />
但显然它不适用于移动版Safari。在这些情况下，您可以使用：
<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
答案 1 :(得分：59)
之前发布的解决方案有两个怪癖：
这是一个完整的解决方案，可选择焦点上的所有文本，但允许在焦点后选择特定的光标点。
$(function () {
var focusedElement;
$(document).on('focus', 'input', function () {
if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
focusedElement = this;
setTimeout(function () { focusedElement.select(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
});
});
答案 2 :(得分：42)
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>
答案 3 :(得分：34)
我知道这已经过时了，但最好的选择是尽可能使用新的placeholder HTML属性：
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
这将导致文本显示，除非输入值，无需选择文本或清除输入。
答案 4 :(得分：12)
根据我的说法，列出的答案是不完整的。我在下面链接了两个如何在Angular和JQuery中执行此操作的示例。
此解决方案具有以下功能：
<强> JQuery的： http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview
$("input").blur(function() {
if ($(this).attr("data-selected-all")) {
//Remove atribute to allow select all again on focus
$(this).removeAttr("data-selected-all");
}
});
$("input").click(function() {
if (!$(this).attr("data-selected-all")) {
try {
$(this).selectionStart = 0;
$(this).selectionEnd = $(this).value.length + 1;
//add atribute allowing normal selecting post focus
$(this).attr("data-selected-all", true);
} catch (err) {
$(this).select();
//add atribute allowing normal selecting post focus
$(this).attr("data-selected-all", true);
}
}
});
<强>角： http://plnkr.co/edit/llcyAf?p=preview
var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var hasSelectedAll = false;
element.on('click', function($event) {
if (!hasSelectedAll) {
try {
//IOs, Safari, thows exception on Chrome etc
this.selectionStart = 0;
this.selectionEnd = this.value.length + 1;
hasSelectedAll = true;
} catch (err) {
//Non IOs option if not supported, e.g. Chrome
this.select();
hasSelectedAll = true;
}
}
});
//On blur reset hasSelectedAll to allow full select
element.on('blur', function($event) {
hasSelectedAll = false;
});
}
};
}]);
答案 5 :(得分：10)
尝试：
onclick="this.select()"
它对我很有用。
答案 6 :(得分：9)
您始终可以使用document.execCommand（supported in all major browsers）
document.execCommand("selectall",null,false);
选择当前聚焦元素中的所有文本。
答案 7 :(得分：6)
确实，请使用onclick="this.select();"，但请记住不要将其与disabled="disabled"结合使用 - 它将无法正常工作，您仍需要手动选择或多次单击以进行选择。如果您希望锁定要选择的内容值，请与属性readonly结合使用。
答案 8 :(得分：5)
使用onfocus事件输入自动对焦：
<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>
这使您可以打开包含所选元素的表单。它的工作原理是使用自动对焦来点击输入，输入然后发送一个onfocus事件，然后选择文本。
答案 9 :(得分：3)
这是Shoban答案的可重用版本：
<input type="text" id="userid" name="userid"
value="Please enter the user ID" onfocus="Clear(this);"
/>
function Clear(elem)
{
elem.value='';
}
通过这种方式，您可以将清除脚本重用于多个元素。
答案 10 :(得分：3)
我一直在寻找仅使用 CSS 的解决方案，发现这适用于 iOS 浏览器（已测试 safari 和 chrome）。
它在桌面 chrome 上没有相同的行为，但选择的痛苦并没有那么大，因为作为用户，您有更多的选择（双击、ctrl-a 等）：
import altair as alt
from vega_datasets import data
source = data.cars()
error_bars = (
alt.Chart(source).mark_rule().encode(
x='Origin',
y='error_lower:Q',
y2='error_upper:Q')
.transform_aggregate(
mean = 'mean(Horsepower)',
stdev = 'stdev(Horsepower)',
groupby=['Origin'])
.transform_calculate(
error_lower = 'datum.mean - 2 * datum.stdev',
error_upper = 'datum.mean + 2 * datum.stdev'))
means = alt.Chart(source).mark_circle(color='black').encode(
x='Origin',
y='mean(Horsepower)')
error_bars + means
答案 11 :(得分：3)
这是React中的一个示例，但是如果您愿意，可以将其转换为Vanilla JS上的jQuery：
class Num extends React.Component {
click = ev => {
const el = ev.currentTarget;
if(document.activeElement !== el) {
setTimeout(() => {
el.select();
}, 0);
}
}
render() {
return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
}
}
这里的诀窍是使用onMouseDown，因为在“ click”事件触发时元素已经具有already received focus（因此activeElement检查将失败）。
必须进行activeElement检查，以便用户可以将光标定位在所需位置，而无需不断重新选择整个输入。
超时是必要的，因为否则文本将被选中然后立即被取消选中，因为我猜浏览器会在光标位置检查后缀。
最后，在React中，el = ev.currentTarget是必需的 ，因为React会重新使用事件对象，并且在setTimeout触发时，您将失去合成事件。
答案 12 :(得分：2)
您可以替换
<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的情况下输入文本框。占位符使得它不是一个值，但顾名思义就是占位符。这就是在多个在线表单中使用的内容，其中包含＆＃34; Username here＆＃34;或＆＃34;电子邮件＆＃34;当你点击它时，＆＃34;电子邮件＆＃34;消失了，你可以马上开始输入。
答案 13 :(得分：2)
你问的确切解决方案是：
<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>
但我想，您正在尝试显示＆＃34;请在输入中输入用户ID＆＃34; 作为占位符或提示。 因此，您可以使用以下方法作为更有效的解决方案：
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
答案 14 :(得分：2)
这样的HTML
<input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>
和没有绑定的javascript代码
function textSelector(ele){
$(ele).select();
}
答案 15 :(得分：2)
注意：：当您考虑使用onclick="this.select()"时，第一次单击时，将选择所有字符，然后，您可能要编辑输入中的某些内容并在字符之间单击，然后它将选择再次所有字符。要解决此问题，您应该使用onfocus而不是onclick。
答案 16 :(得分：2)
此问题包含.select（）无法在移动平台上运行的选项：Programmatically selecting text in an input field on iOS devices (mobile Safari)
答案 17 :(得分：2)
捕获click事件的问题是文本中的每个后续点击都会再次选择它，而用户可能希望重新定位光标。
对我来说有用的是声明变量selectSearchTextOnClick，默认情况下将其设置为true。 click处理程序检查变量是否仍然为真：如果是，则将其设置为false并执行select（）。然后我有一个模糊事件处理程序，它将其设置为true。
到目前为止，结果似乎是我期望的行为。
（编辑：我忽略了说我尝试按照某人的建议捕捉焦点事件，但这并不起作用：焦点事件触发后，点击事件可以触发，立即取消选择文本）。
答案 18 :(得分：1)
这是TextBox的正常活动。
点击1 - 设置焦点
点击2/3 （双击） - 选择文字
首次加载页面时，您可以在TextBox上设置焦点，以将“选择”缩减为单个双击事件。
答案 19 :(得分：1)
在输入字段中使用“占位符”代替“值”。
答案 20 :(得分：0)
如果您只是尝试在用户选择元素时替换占位符文本，那么现在最好使用placeholder属性。但是，如果要在字段获得焦点时选择所有当前值，则@Cory House和@Toastrackenigma答案的组合似乎是最规范的。使用focus和focusout事件，设置/释放当前焦点元素的处理程序，并在焦点时选择全部。 angular2 / typescript示例如下（但转换为vanilla js会很简单）：
模板：
<input type="text" (focus)="focus()" (focusout)="focusout()" ... >
组件：
private focused = false;
public focusout = (): void => {
this.focused = false;
};
public focus = (): void => {
if(this.focused) return;
this.focused = true;
// Timeout for cross browser compatibility (Chrome)
setTimeout(() => { document.execCommand('selectall', null, false); });
};
答案 21 :(得分：0)
如果有人想在页面加载上执行此操作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);
基于this帖子。感谢CSS-Tricks.com
答案 22 :(得分：0)
如果您使用的是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 - 因此如果使用其他内容，则可以跳过第一行和最后一行。
答案 23 :(得分：0)
如果您正在寻找纯香草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() {
document.createRange().selectNodeContents(this);
});<p>Cicking inside field will not trigger the selection, but tabbing into the fields will.</p>
<label for="">JS File Example<label><br>
<input id="myElement1" value="This is some text" /><br>
<br>
<label for="">Inline example</label><br>
<input id="myElement2" value="This also is some text" onfocus="document.createRange().selectNodeContents( this );" />
答案 24 :(得分：0)
使用 placeholder="Please enter the user ID" 而不是 value="Please enter the user ID" 是这种情况的最佳方法，但该函数在某些情况下可能很有用。
<input> 元素已经可以监听 focus 事件。我们可以只添加事件监听器而不是 document，并且不需要进一步监听 click。
纯 JavaScript：
document.getElementById("userid").addEventListener("focus", function() {
this.select();
});
使用 JQuery：
$("#userid").on("focus", function() {
this.select();
});
您可以使用 this.setSelectionRange(0, this.value.length) 而不是 this.select() 取决于您的目的，但这不适用于某些输入类型，例如 number。
答案 25 :(得分：0)
<input id="my_input" style="width: 400px; height: 30px;" value="some text to select">
<br>
<button id="select-bn" style="width: 100px; height: 30px; margin-top: 20px;cursor:pointer;">Select all</button>
<br><br>
OR
<br><br>
Click to copy
<br><br>
<input id="my_input_copy" style="width: 400px; height: 30px;" value="some text to select and copy">
<br>
<button id="select-bn-copy" style="width: 170px; height: 30px; margin-top: 20px;cursor:pointer;">Click copy text</button>
<script type="text/javascript">
$(document).on('click', '#select-bn', function() {
$("#my_input").select();
});
//click to select and copy to clipboard
var text_copy_bn = document.getElementById("select-bn-copy");
text_copy_bn.addEventListener('click', function(event) {
var copy_text = document.getElementById("my_input_copy");
copy_text.focus();
copy_text.select();
try {
var works = document.execCommand('copy');
var msg = works ? 'Text copied!' : 'Could not copy!';
alert(msg);
} catch (err) {
alert('Sorry, could not copy');
}
});
</script>