单击时selectHTML文本input中的所有文本
我有以下代码在HTML网页中显示文本框。
<input type="text" id="userid" name="userid" value="Please enter the user ID" /> 当页面显示时，文本包含请input用户ID消息。 不过，我发现用户需要点击3次才能select所有文本（在这种情况下请input用户名 ）。
只需点击一下就可以select整个文本吗？
编辑：
对不起，我忘了说：我必须使用input type="text"
你可以使用这个JavaScript片段：
<input onClick="this.select();" value="Sample Text" />
但显然它不适用于移动Safari。 在这些情况下，您可以使用：
<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
以前发布的解决scheme有两个怪癖：
- 在Chrome中，通过.select（）进行的select不会停留 – 添加轻微超时可以解决此问题。
- 聚焦后将光标置于所需的点是不可能的。
这是一个完整的解决scheme，select焦点上的所有文本，但允许在焦点后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(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting. }); });
Html（你必须把onclick属性放在你希望在页面上工作的每个input上）
<input type="text" value="click the input to select" onclick="this.select();"/>
或更好的select
jQuery（这将适用于页面上的每个文本input，无需更改您的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>
我知道这是旧的，但最好的select是现在使用新的placeholder HTML属性，如果可能的话：
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
这将导致文本显示，除非input一个值，不需要select文本或清除input。
列出的答案是根据我的部分。 我在下面链接了两个如何在Angular和JQuery中实现这个function的例子。
此解决scheme具有以下function：
- 适用于支持JQuery，Safari，Chrome，IE，Firefox等的所有浏览器
- 适用于Phonegap / Cordova：Android和IO。
- 只有在input获得焦点后才select全部，直到下一个模糊再聚焦
- 可以使用多个input，它不会出现问题。
- 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); } } });
Angular： 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, eg Chrome this.select(); hasSelectedAll = true; } } }); //On blur reset hasSelectedAll to allow full select element.on('blur', function($event) { hasSelectedAll = false; }); } }; }]);
尝试：
onclick="this.select()"
这对我很好。
您始终可以使用document.execCommand （ 在所有主stream浏览器中都支持 ）
document.execCommand("selectall",null,false);
select当前焦点元素中的所有文本。
确实，使用onclick="this.select();" 但记住不要将它与disabled="disabled"结合起来 – 它不会工作，那么您将需要手动select或者多次点击来select。 如果要locking要select的内容值，请将其与readonly属性结合使用。
input自动对焦，带有onfocus事件：
<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>
这使您可以select所需的元素来打开表单。 它通过使用自动对焦命中input，然后发送自己的onfocus事件，然后select文本。
这是Shoban的答案的可重用版本：
<input type="text" id="userid" name="userid" value="Please enter the user ID" onfocus="Clear(this);" /> function Clear(elem) { elem.value=''; }
这样，你可以重复使用清除脚本的多个元素。
那么这是一个TextBox的正常活动。
点击1 – 设置焦点
点击2/3 （双击） – select文本
您可以在页面首次加载时将焦点设置在TextBox上，以将“select”减less为单个双击事件。
捕获点击事件的问题是，文本中的每个后续点击都会再次选中，而用户可能期望重新定位光标。
什么对我来说是声明一个variables，selectSearchTextOnClick，并将其设置为true默认情况下。 点击处理程序检查variables是否仍然为真：如果是，则将其设置为false并执行select（）。 然后我有一个模糊事件处理程序将其设置为true。
目前的结果看起来像我期望的行为。
（编辑：我忽略说，我试图捕捉焦点事件，因为有人build议，但这是行不通的：焦点事件触发后，点击事件可以触发，立即取消select文本）。
在.select（）在移动平台上不起作用时，此问题有以下选项：以编程方式在iOS设备上的input字段中select文本（移动Safari）
在input字段中使用“占位符”而不是“值”。
Html like this <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>
和没有绑定的JavaScript代码
function textSelector(ele){ $(ele).select(); }
你问的确切解决scheme是：
<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>
但是我想，你正试图在input中显示“请input用户名”作为占位符或提示。 所以，您可以使用以下作为更有效的解决scheme：
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
如果您正在使用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 – 所以如果使用别的东西，第一行和最后一行可以跳过。
如果有人想在页面加载瓦特/ jQuery（甜的search字段）这是我的解决scheme
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元素时被replace，那么现在最好使用placeholder属性。 然而，如果你想select所有的当前值，当一个领域获得焦点时，@Cory House和@Toastrackenigma答案的组合似乎是最经典的。 使用focus和focusout事件，设置/释放当前焦点元素的处理程序，以及聚焦时全部select。 一个angular2 / typescript的例子如下（但将转换为香草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); }); };
