Javascript 当文本框收到焦点时，选择文本框的所有内容（Vanilla JS或jQuery）

当文本框收到焦点时，哪种普通的JS或jQuery解决方案会选择文本框的所有内容？

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

---

这里的答案在某种程度上帮助了我，但当我在Chrome中单击向上/向下按钮时，HTML5数字输入字段出现问题

如果您单击其中一个按钮，并将鼠标悬停在该按钮上，则数字将不断变化，就像您因为鼠标被扔掉而按住鼠标按钮一样

我解决了这个问题，在触发鼠标悬停处理程序后立即将其移除，如下所示：

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

---

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

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

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

---

这样行，试试这个-

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

---

在Safari/IE 9和Chrome中工作，但我没有机会在Firefox中进行测试。

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

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

---

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

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

看看这个例子：

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

文本在这里

---

资料来源：，

我通过加入一些函数调用，稍微改进了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>

var doMouseUp=true；
函数TextBoxMouseDown（）{
doMouseUp=this==document.activeElement；
返回doMouseUp；
}
函数TextBoxMouseUp（）{
if（doMouseUp）
{返回true；}
否则{
doMouseUp=true；
返回false；
}
}

这比扎克的回答稍有改进。它在IE中工作完美，在Chrome中根本不起作用，在FireFox中交替成功（实际上每隔一段时间）。如果有人对如何使其在FF或Chrome中可靠工作有想法，请分享

---

无论如何，我想我应该分享我所能做的，让它变得更好。

我知道内联代码是不好的风格，但我不想把它放到.js文件中。

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

没有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>

---

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

如果将事件链接在一起，我相信这样就无需使用此线程中其他地方建议的

.one

例如：

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

---

这也适用于iOS：

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

我的解决方案是下一个：

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

像@Travis和@Mari一样，我想在用户点击时自动选择，这意味着阻止

mouseup

事件的默认行为，但不会阻止用户四处点击。我提出的解决方案，适用于IE11、Chrome 45、Opera 32和Firefox 29（这些是我目前安装的浏览器），基于鼠标点击所涉及的事件序列

当您单击没有焦点的文本输入时，您将获得以下事件（以及其他事件）：

• mousedown

  ：响应您的单击。如果需要，默认处理将引发焦点，并设置选择开始

• focus

  ：作为默认处理

  mousedown

  的一部分

• mouseup

  ：完成单击，其默认处理将设置选择结束

单击已具有焦点的文本输入时，将跳过

focus

事件。正如@Travis和@Mari都敏锐地注意到的，只有在

focus

事件发生时，才需要防止默认处理

mouseup

。但是，由于没有“

焦点

未发生”事件，我们需要推断这一点，我们可以在

鼠标向下

处理程序中进行推断

@Mari的解决方案要求导入jQuery，这是我想要避免的@Travis的解决方案通过检查

document.activeElement

来实现这一点。我不知道为什么他的解决方案不能跨浏览器工作，但有另一种方法可以跟踪文本输入是否具有焦点：只需跟踪其

焦点

和

模糊

事件

以下是适用于我的代码：

    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;
      };

---

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

我知道这里已经有很多答案了——但到目前为止，这一个还没有找到；还可用于ajax生成内容的解决方案：

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

---

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

---

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

HTML:

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

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

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

使用JQuery:

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

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

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

使用React JS:

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

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

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

在相应的组件中-

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

e.target.select（）}
/>

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

您只需添加以下属性：

onfocus=“this.select（）”

例如：

---

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

我把这本书种在某个地方，效果很好

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

这对我来说很有用（因为它不是在回答中而是在评论中）

---

我有点迟到了。