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

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

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

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

Answer 6

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

看看这个例子：

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

来自CSS Trics。

Answer 7

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

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

Answer 8

这也适用于iOS：

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

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

Answer 9

这里的答案帮助我达到了一定程度，但是当点击Chrome中的向上/向下按钮时，我在HTML5号码输入字段上遇到了问题。

如果您单击其中一个按钮，并将鼠标悬停在按钮上，则数字会不断变化，就像您按住鼠标按钮一样，因为鼠标被丢弃了。

我通过在触发鼠标处理程序后立即删除它来解决这个问题，如下所示：

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

希望这有助于未来的人们......

Answer 10

我知道这里已经有很多答案 - 但到目前为止还没有这个答案;一个也适用于ajax生成内容的解决方案：

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

Answer 11

我知道内联代码风格不好，但我不想把它放到.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>

Answer 12

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 13

与@Travis和@Mari一样，我希望在用户点击时自动选择，这意味着阻止mouseup事件的默认行为，但不会阻止用户点击。我提出的解决方案是IE11，Chrome 45，Opera 32和Firefox 29（这些是我目前安装的浏览器），它基于鼠标点击所涉及的事件序列。

当您单击没有焦点的文本输入时，您将获得这些事件（等等）：

mousedown：回复您的点击。如有必要，默认处理会引发focus并设置选择开始。
focus：作为mousedown的默认处理的一部分。
mouseup：点击完成，其默认处理将设置选择结束。

单击已具有焦点的文本输入时，将跳过focus事件。由于@Travis和@Mari都非常注意，只有mouseup事件发生时才需要阻止focus的默认处理。但是，由于没有“focus没有发生”事件，我们需要推断这个，我们可以在mousedown处理程序中做。

@ Mari的解决方案要求导入jQuery，我想避免使用它。 @ Travis的解决方案通过检查document.activeElement来做到这一点。我不知道为什么他的解决方案在浏览器中不起作用，但还有另一种方法来跟踪文本输入是否具有焦点：只需遵循其focus和blur事件。

以下是适用于我的代码：

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

我希望这对某人有所帮助。： - ）

Answer 14

通过合并一些函数调用，我能够稍微改善Zach的答案。该答案的问题在于它完全禁用了onMouseUp，因此一旦它具有焦点，就会阻止你在文本框中点击。

这是我的代码：

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

这比Zach的答案略有改进。它在IE中完美运行，在Chrome中根本不起作用，并且在FireFox中交替成功（字面上每隔一段时间）。如果有人知道如何在FF或Chrome中使其可靠运行，请分享。

无论如何，我想我会分享我能做的更好一点。

Answer 15

这样可行，试试这个 -

<input id="textField1" onfocus="this.select()" onmouseup="return false" />

在Safari / IE 9和Chrome中使用，我没有机会在Firefox中测试。

Answer 16

这对我有用（因为它不是在答案中而是在评论中发布）

 $("#textBox").focus().select();

Answer 17

onclick="this.focus();this.select()"

Answer 18

什么是JavaScript或jQuery解决方案，当文本框收到焦点时选择文本框的所有内容？

您只需添加以下属性：

onfocus="this.select()"

例如：

<input type="text" value="sometext" onfocus="this.select()">

（老实说，我不知道你为什么还需要别的东西。）

Answer 19

我把这个放在哪里，完美地工作！

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });

Answer 20

我参加聚会有点晚了，但这在IE11，Chrome，Firefox中完美运行，而不会弄乱mouseup（也没有JQuery）。

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

Answer 21

注意：如果您使用ASP.NET编程，则可以使用C＃中的ScriptManager.RegisterStartupScript运行脚本：

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

或者只需在其他答案中建议的HTML页面中键入脚本。

Answer 22

如果您将事件链接在一起，我相信它不需要像本线程中其他地方所建议的那样使用.one。

示例：

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

Answer 23

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

编辑：Per @DavidG的请求，我无法提供详细信息，因为我不确定为什么会这样，但我认为它与焦点事件向上或向下传播或者它做什么以及输入元素有关得到通知它收到了重点。设置超时为元素提供了实现它的时刻。

Answer 24

我的解决方案是下一个：

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

因此，mouseup通常会起作用，但在通过输入获得焦点后不会取消选择

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

24 个答案: