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

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

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

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

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

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

看这个例子：

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

资料来源：CSS Tricks，MDN

这不仅是Chrome / Safari问题，我在Firefox 18.0.1中也遇到了类似的问题。有趣的是，这不会在MSIE上发生！这里的问题是第一个mouseup事件，该事件强制取消选择输入内容，因此只需忽略第一个事件。

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

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

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：

在各个组件内部的render函数中-

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

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

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

这也将在iOS上运行：

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

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/select

我知道内联代码的样式不好，但是我不想将其放入.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>

此处的答案在一定程度上帮助了我，但是单击Chrome中的向上/向下按钮时，我在HTML5数字输入字段上遇到了问题。

如果单击其中一个按钮，然后将鼠标悬停在按钮上，则数字将保持不变，就好像您按住鼠标按钮一样，这是因为将mouseup扔掉了。

我通过如下方式立即删除mouseup处理程序来解决此问题：

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

希望这对以后的人们有所帮助...

这将起作用，尝试一下-

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

可以在Safari / IE 9和Chrome中运行，但是我没有机会在Firefox中进行测试。

我知道这里已经有很多答案了，但是到目前为止，还没有找到答案。一个也可以与ajax生成的内容一起使用的解决方案：

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

通过合并一些函数调用，我能够稍微改善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中可靠地工作，请分享。

无论如何，我想我会分享我可以做的更好的事情。

像@Travis和@Mari一样，我想在用户单击时自动选择，这意味着阻止mouseup事件的默认行为，但不能阻止用户单击。我想出的解决方案基于IE单击，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;
      };

我希望这对某人有帮助。:-)

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

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

您只需要添加以下属性：

onfocus="this.select()"

例如：

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

（老实说，我不知道您为什么还需要其他任何东西。）

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

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

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

编辑：根据@DavidG的请求，我无法提供详细信息，因为我不确定为什么会这样，但是我认为它与焦点事件向上或向下传播或它所做的任何事情以及输入元素获得通知有关它得到了关注。设置超时可以使元素有一点时间意识到它已经完成了。

如果将事件链接在一起，我相信它消除了.one对此线程其他地方建议的使用的需要。

例：

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

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

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

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

我把它播到某个地方，完美地工作！

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

我参加聚会有点晚了，但这在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);
        });
    }
});

接下来是我的解决方案：

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通常可以正常工作，但是在通过输入获得焦点后不会取消选择