单击时选择HTML文本输入中的所有文本

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

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

显示页面时，文本包含“ 请输入用户ID”消息。但是，我发现用户需要单击3次才能选择所有文本（在这种情况下， 请输入用户ID ）。

只需单击一下就可以选择整个文本吗？

编辑：

抱歉，我忘了说：我必须使用输入type="text"

#1楼

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>

#2楼

尝试：

onclick="this.select()"

这对我很有效。

#3楼

我知道这已经很老了，但是最好的选择是现在尽可能使用新的placeholder HTML属性：

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

除非输入值，否则这将导致文本显示，从而无需选择文本或清除输入。

#4楼

实际上，请使用onclick="this.select();" 但请记住不要将它与disabled="disabled"结合使用-否则将无法使用，您仍然需要手动选择或单击鼠标以进行选择。如果您希望锁定要选择的内容值，请与属性readonly结合使用。

#5楼

捕获click事件的问题在于，文本中的每次后续单击都会再次选择它，而用户可能希望重新定位光标。

对我有用的是声明一个变量selectSearchTextOnClick，并将其默认设置为true。点击处理程序检查该变量是否仍然为true：如果是，则将其设置为false并执行select（）。然后，我有一个模糊事件处理程序，将其设置为true。

到目前为止的结果似乎是我所期望的行为。

（编辑：我忽略了我曾尝试按照某人的建议捕获焦点事件，但这没有用：在焦点事件触发后，click事件可以触发，立即取消选择文本）。

#6楼

先前发布的解决方案有两个怪癖：

在Chrome浏览器中，通过.select（）进行的选择不粘滞-添加轻微的超时即可解决此问题。
聚焦后，无法将光标放置在所需的位置。

这是一个完整的解决方案，可以选择所有焦点上的文本，但是允许在焦点之后选择特定的光标点。

        $(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(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.});});

#7楼

当.select（）在移动平台上不起作用时，此问题具有选项：以编程方式在iOS设备上的输入字段中选择文本（移动Safari）

#8楼

在输入字段中使用“占位符”代替“值”。

#9楼

如果您使用的是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-因此，如果使用其他内容，则可以跳过第一行和最后一行。

#10楼

如果有人想在使用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

#11楼

列出的答案对我来说是不完整的。我在下面链接了两个如何在Angular和JQuery中执行此操作的示例。

此解决方案具有以下功能：

适用于所有支持JQuery，Safari，Chrome，IE，Firefox等的浏览器。
适用于Phonegap / Cordova：Android和IO。
输入聚焦后仅选择一次，直到下一次模糊然后聚焦
可以使用多个输入，并且不会出现故障。
Angular指令具有很好的重用性，只需添加指令select-all-on-click
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 etcthis.selectionStart = 0;this.selectionEnd = this.value.length + 1;hasSelectedAll = true;} catch (err) {//Non IOs option if not supported, e.g. Chromethis.select();hasSelectedAll = true;}}});//On blur reset hasSelectedAll to allow full selectelement.on('blur', function($event) {hasSelectedAll = false;});}};
}]);

#12楼

像这样的HTML <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

和没有绑定的javascript代码

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

#13楼

您可以始终使用document.execCommand （所有主要浏览器都支持）

document.execCommand("selectall",null,false);

选择当前焦点元素中的所有文本。

#14楼

输入自动对焦，并带有onfocus事件：

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

这使您可以打开一个选定了所需元素的表单。它通过使用自动聚焦来敲击输入，然后向自身发送一个onfocus事件，该事件依次选择文本。

#15楼

您可以使用以下javascript代码段：

<input onClick="this.select();" value="Sample Text" />

但显然，它不适用于移动Safari。在这种情况下，您可以使用：

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

#16楼

嗯，这是TextBox的正常活动。

点击1-设置焦点

点击2/3 （双击）-选择文本

您可以在页面首次加载时将重点放在TextBox上，以将“选择”减少为单个双击事件。

#17楼

这是Shoban答案的可重用版本：

<input type="text" id="userid" name="userid"value="Please enter the user ID" onfocus="Clear(this);"
/>function Clear(elem)
{
elem.value='';
}

这样，您可以将清除脚本重用于多个元素。

#18楼

您要求的确切解决方案是：

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

但是我想，您正在尝试在输入中显示“请输入用户ID”作为占位符或提示。因此，您可以将以下内容用作更有效的解决方案：

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

#19楼

如果您只是想让占位符文本在用户选择元素时被替换，那么显然，如今最好使用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); });
};

#20楼

您可以更换

<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。占位符使它不是一个值，但顾名思义是占位符。那就是在多个在线表单中使用的内容，上面写着“此处的用户名”或“电子邮件”，当您单击它时，“电子邮件”消失，您可以立即开始输入。

#21楼

这是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”事件触发时元素已经获得焦点（因此activeElement检查将失败）。

activeElement检查是必需的，以便用户可以将光标定位在所需的位置，而无需不断重新选择整个输入。

超时是必要的，因为否则我将选择文本，然后立即取消选择文本，因为我猜浏览器会进行光标定位检查后缀。

最后， 在React中 ， el = ev.currentTarget是必需的，因为React会重用事件对象，并且在setTimeout触发时，您将失去合成事件。

#22楼

注意：当您考虑onclick="this.select()" ，第一次单击时，将选择所有字符，之后，您可能想要编辑输入中的内容并再次单击字符之间，但是它将再次选择所有字符。要解决此问题，您应该使用onfocus而不是onclick 。