获得焦点时选择文本框的所有内容(Vanilla JS或jQuery)

Question

什么是Vanilla JS或jQuery解决方案,当文本框获得焦点时,它将选择文本框的所有内容？

Answer 1

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

Answer 2

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

Answer 3

$(document).ready(function() {
  $("input[type=text]").focus().select();
});

Answer 4

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

Answer 5

jQuery不是JavaScript,在某些情况下更容易使用.

看看这个例子:

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

来自CSS Trics.

Answer 6

这不仅仅是Chrome/Safari问题,我在Firefox 18.0.1中遇到了类似的行为.有趣的是,这不会发生在MSIE上!这里的问题是第一个强制取消选择输入内容的mouseup事件,所以只需忽略第一次出现.

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

timeOut方法会导致奇怪的行为,并且阻止每个mouseup事件,您无法删除在输入元素上再次单击的选择.

Answer 7

HTML :

Enter Your Text : <input type="text" id="text-filed" value="test">

使用JS：

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

使用 JQuery ：

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

使用 React JS：

在相应的组件中 -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

Answer 8

我的解决方案是使用超时.似乎工作正常

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Answer 9

这也适用于iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select