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

小开

最佳答案

你可以使用JavaScript .select()方法:

<label for="userid">User ID</label>
<input onClick="this.select();" value="Please enter the user ID" id="userid" />

但显然它在移动版Safari上不起作用。在这些情况下，你可以使用:

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

小开

这是一个正常的文本框活动。

点击1 -设置焦点

单击2/3(双击)-选择文本

您可以在页面第一次加载时在文本框上设置焦点，以减少“选择”为单个双击事件。

小开

以下是Shoban回答的可重复使用版本:

<input type="text" id="userid" name="userid"
value="Please enter the user ID" onfocus="Clear(this);"
/>


function Clear(elem)
{
elem.value='';
}

这样就可以为多个元素重用clear脚本。

小开

Html(你必须把onclick属性放在你想要它在页面上工作的每个输入上)

 <input type="text" value="click the input to select" onclick="this.select();"/>

# EYZ0

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>

小开

试一试:

onclick="this.select()"

这对我来说很有效。

小开

您不应该使用这种方法为输入值提供示例(任何其他)。

最好的选择是现在使用placeholder HTML属性如果可能的话:

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

这将导致文本显示，除非输入值，消除了选择文本或清除输入的需要。

请注意占位符不能代替标签，因为一旦输入文本，占位符就会消失，并对可访问性造成问题。

小开

实际上，使用onclick="this.select();"，但记住不要将它与disabled="disabled"结合起来-它将不起作用，你仍然需要手动选择或点击选择。如果您希望锁定要选择的内容值，请结合属性readonly。

小开

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

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

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

(编辑:我忘了说我曾尝试按照某人的建议捕获焦点事件，但这不起作用:焦点事件触发后，点击事件可以触发，立即取消选择文本)。

小开

之前发布的解决方案有两个怪癖:

在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.
});
});

小开

当.select()在移动平台上不起作用时，这个问题有选项:在iOS设备(移动Safari)上以编程方式选择输入字段中的文本

小开

在输入字段中使用“占位符”而不是“值”。

小开

如果你正在使用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

小开

在我看来，列出的答案是不完整的。我在下面链接了两个如何在Angular和JQuery中做到这一点的例子。

该方案具有以下特点:

适用于所有支持JQuery, Safari, Chrome, IE, Firefox等浏览器。
适用于Phonegap/Cordova: Android和IOs。
只选择所有一次输入得到焦点，直到下一个模糊，然后焦点
可以使用多个输入，而且不会出现故障。
Angular指令有很好的重用性，只需添加指令select-all-on-click即可
JQuery可以很容易地修改

< >强JQuery: # EYZ0 < / p >

$("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);
}
}
});

< >强角: # EYZ0 < / p >

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;
});
}
};
}]);

小开

Html像这样 # EYZ0 < / p >

和javascript代码没有绑定

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

小开

你可以使用document.execCommand (所有主流浏览器均支持)

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

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

更新2021:execCommand现在已弃用。

说实话，这可能是最好的选择，因为它是一个老的IE API，已经被其他浏览器采用了，使用它总是有点奇怪。尽管如此，有一个同时处理<input>字段和contenteditable元素的解决方案是很好的。

.select()可能是目前使用<input>字段的最佳方式。

对于contenteditable，现代解决方案，使用范围API。

小开

输入自动聚焦，onfocus事件:

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

这样就可以打开选中所需元素的表单。它的工作原理是使用自动聚焦来命中输入，然后发送自己一个onfocus事件，该事件反过来选择文本。

小开

你所问问题的确切解决方案是:

<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" />

小开

如果你只是想让占位符文本在用户选择元素时被替换，那么现在使用placeholder属性显然是最佳实践。但是，如果您希望在字段获得关注时选择所有当前值，那么@Cory House和@Toastrackenigma答案的组合似乎是最规范的。使用focus和focusout事件，带有设置/释放当前焦点元素的处理程序，并在聚焦时选择所有元素。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); });
};

小开

你可以替换

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

小开

下面是React中的一个例子，但如果你喜欢，它可以在香草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检查是必要的，这样用户就可以将光标定位到他们想要的位置，而不必不断地重新选择整个输入。

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

最后，el = ev.currentTarget是必要的在反应，因为React重用事件对象，当setTimeout触发时，你将失去合成事件。

小开

当你考虑onclick="this.select()"时，在第一次点击时，所有字符都会被选中，之后可能你想在输入中编辑一些东西，然后再次单击字符，但它会再次选中所有字符。要解决这个问题，你应该使用onfocus而不是onclick。

小开

如果你正在寻找一个纯粹的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 );" />

小开

我正在寻找一个css唯一的解决方案，发现这适用于iOS浏览器(测试safari和chrome)。

它在桌面chrome上没有相同的行为，但选择的痛苦没有那么大，因为作为用户，你有更多的选项(双击，ctrl-a等):

.select-all-on-touch {
-webkit-user-select: all;
user-select: all;
}

小开

使用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。

小开

现场演示

<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>

小开

用这个:

var textInput = document.querySelector("input");
textInput.onclick = function() {
  

textInput.selectionStart = 0;
textInput.selectionEnd = textInput.value.length;


}

<input type="text">

小开

我认为通过事件来控制更好。这个变体看起来很直观，也适用于ts:

    onFocus={e => {
e.target.select();
}

如果你每次点击都需要selectAll，你可以使用这个:

    onClick={e => {
e.target.focus();
e.target.select();
}