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

我知道已经有很多答案了，但是这个答案还没有出现过；这是一个可以处理ajax生成内容的解决方案：

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

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

当您单击一个没有焦点的文本输入框时，会出现以下事件（以及其他事件）：

• mousedown：响应您的点击。如果需要，将引发focus并设置选择开始。
• focus：作为mousedown的默认处理的一部分。
• mouseup：完成您的点击，其默认处理将设置选择结束。

当您单击已经具有焦点的文本输入框时，会跳过focus事件。正如@Travis和@Mari所注意到的那样，仅当focus事件发生时才需要防止mouseup的默认处理。然而，由于没有“focus未发生”事件，因此我们需要在mousedown处理程序中推断出这一点。

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

以下是对我有效的代码：

  function MakeTextBoxAutoSelect(input)
  {
    var blockMouseUp = false;
    var inputFocused = false;

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

        inputFocused = true;
      };

    input.onblur =
      function ()
      {
        inputFocused = false;
      };

    input.onmousedown =
      function ()
      {
        blockMouseUp = !inputFocused;
      };

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

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

这将有效，尝试一下 -

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

本代码在Safari/IE 9和Chrome中可以工作，但我没有机会测试Firefox。

这里的答案在某种程度上对我有所帮助，但在Chrome浏览器中使用HTML5数字输入字段时，我遇到了一个问题。如果你点击其中一个按钮，并将鼠标悬停在按钮上，数字会持续变化，就好像你一直按住鼠标按钮一样，因为mouseup事件被丢弃了。我通过以下方式解决了这个问题：立即删除已触发的mouseup处理程序。

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

希望这对未来的人有所帮助...

你只需要添加以下属性：
当文本框获得焦点时，可以使用 JavaScript 或 jQuery 解决方案来选择文本框的所有内容。

onfocus="this.select()"

例如：

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

< p > < em > （说实话，我不知道为什么你需要其他东西。）

我通过加入一些函数调用成功地改进了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中可靠地使其工作，请分享。

无论如何，我想分享我所知道的，让它变得更好一些。

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

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

如果您将事件链接在一起，我相信这将消除在此线程中建议使用.one的需要。
例如：

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

虽然我来晚了，但这在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);
        });
    }
});

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

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

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