logo标签列表

当文本框获得焦点时选择所有内容 (使用原生JS或jQuery)

javascriptjqueryuser-interface
350

如何使用简单的原生JavaScript或jQuery实现在文本框获得焦点时全选文本框中的内容？

同时也可以参考这篇文章："使用jQuery在Safari和Chrome中无法选择文本"。 - gdoron
3
由于某些原因，该链接重定向至此问题本身。 - Destrictor
@Destrictor，是的，应该是这样的："使用jQuery在Safari和Chrome中无法选择聚焦文本" - gdoron
大多数这些解决方案的问题在于，当更改输入字段中的光标位置时，它们无法正确工作。请查看我的答案：https://dev59.com/h3A75IYBdhLWcg3ws7Yh#20826207 - Colin Breame
25个回答
392
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
26
另外提供一些额外信息： 现在可以将"input[type=text]" 改为 "input:text" 祝好 - Ricardo Vega
8
这似乎在Chrome上不能正常工作，而且jQuery网站上说它与浏览器有关。还有其他人可以验证吗？ - Kenny Wyland
71
看起来 WebKit 浏览器会因为 mouseup 事件而干扰它。我添加了以下代码，问题得到解决：$('input:text').mouseup(function(e) { return false; }); - Kenny Wyland
5
肯尼说得对，但不幸的是，“mouseup”事件也会影响Chrome浏览器上的旋转控件。通过使用“click”事件来触发而不是“focus”，似乎可以解决这个问题。 - Richard Kennard
24
我会这样使用： $("input:text").select().focus(); （说明：这是jQuery代码，用于在页面加载完成后自动选择并聚焦文本输入框。） - Phuong
显示剩余5条评论
277

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />

49
为了防止在点击时取消选择，需要在onmouseup属性中添加"return false"。 - Anthony Johnston
2
对于mouseup事件，需要使用某种stopEvent来避免不可靠的情况。这样做的缺点是，一旦光标在字段中，点击所选文本内的任何位置以将光标定位到那里就无法正常工作；点击被有效地禁用了。尽管如此，在需要在焦点上选择整个文本的情况下，这可能是两害相权取其轻的选择。 - enigment
我能够在enigment提出的问题上通过将全局变量doMouseUp设置为false来解决一部分问题，如果在onMouseDown事件中this！= document.activeElement。然后，在onMouseUp期间，重置doMouseUp为true并在重置之前返回doMouseUp值。这变得非常复杂，需要代码-我将发布一个更好解释的答案。 - Travis
4
如果您希望用户在文本框内聚焦后能够自由选择和编辑文本，请不要添加"onmouseup="return false;"。使用此代码将锁定文本，使其处于“全选”状态，用户除非键入新文本或使用箭头键移动，否则将无法编辑它。说实话，这种行为感觉非常奇怪，除非文本框旨在永久不可编辑（因此禁用），否则没有任何意义。 - ADTC
1
从技术上讲，如果您只想在用户第一次单击或切换选项卡时发生选择，则不需要 onmouseup="return false;"。并且纯JavaScript加1！ - clabe45
显示剩余2条评论
47
$(document).ready(function() {
  $("input[type=text]").focus().select();
});
5
确认。当前得票最高/被接受的答案似乎在Chrome上无法使用。 - Aron Boyette
39
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
1
enigment对Zach的回答发表的评论提到了防止mouseup事件默认行为的一个缺点：“一旦光标在字段中，点击所选文本内的某个位置将光标定位到那里就无法工作；点击被有效地禁用。尽管如此，在需要在焦点上选择整个文本的情况下，这可能是两害相权取其轻的选择。” - JohnK
29

jQuery不是JavaScript，某些情况下使用起来更加容易。

看这个例子：

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

来源：CSS Tricks，MDN

7
如果你不介意混淆标记和代码，那或许可以这样做；但现在大多数人都试图保持脚本的“非侵入性”。哦...还有，jQuery 就是 JavaScript。 - Andrew Barber
2
感谢您提供 onclick 的建议，它非常好用。并不是每个人都使用 jQuery，所以很高兴看到另一个选择。 - Lukus
1
这假设用户只使用鼠标。 - pcnate
可以在键盘上使用onfocus="this.focus();this.select()"。 - Muhammad Nadeem
23

HTML：

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });
Enter Your Text : <input type="text" id="text-filed" value="test with filed text">

使用 JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

使用 React JS:

在相应的组件中 -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>
2
在React中，这对我很有效：onFocus={(e) => e.target.select()} - Paito
22

这不仅是Chrome/Safari的问题，我在Firefox 18.0.1上也遇到了类似的情况。有趣的是这在MSIE上并没有发生！问题出在第一个mouseup事件，它强制取消选择输入内容，所以忽略第一次出现的事件即可。

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

timeOut方法会导致奇怪的行为，阻止了每一个mouseup事件，你无法通过再次点击输入元素来取消选择。

2
为了避免单击结束后无法选择文本的问题，建议使用“one”来代替“+1”。我个人非常不喜欢在鼠标刚点击时就无法用鼠标选择文本。 - Pluc
11

我的解决方案是使用超时。看起来还可以正常工作。

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});
这是我使用和偏好的解决方案。我使用超时值为0，因为这将导致它被添加到当前事件队列的末尾，这意味着它将在“mouseup”事件之后运行。 - DavidM
6
4

我知道内联代码不是一个好的风格，但我不想将这个放入.js文件中。 不需要使用jQuery！

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接