Javascript：用于选择焦点文本框中所有文本的跨浏览器解决方案答案

【问题标题】：Javascript: cross browser solution for selecting all text inside a textbox on focusJavascript：用于选择焦点文本框中所有文本的跨浏览器解决方案
【发布时间】：2011-07-27 23:34:02
【问题描述】：

我追求以下功能：

用户点击或进入文本框
文本框中的所有文本都被选中，除非文本框已经获得焦点，在这种情况下，应该会出现默认的单击/选择功能

这可能吗？

这适用于 Firefox 5

$('input[type="text"]').live('focus', function () {
    this.select();
});

http://jsfiddle.net/HmQxZ/13/

Chrome 和 IE8 只在一瞬间选择所有文本

这在 Chrome 中有效*

$('input[type="text"]').live('click', function () {
    this.select();
});

http://jsfiddle.net/HmQxZ/12/

Firefox 和 IE8 选择所有文本，但在随后单击时，文本仍保持选中状态。

*类型的作品，在文本框获得焦点后，单击它会在选择所有文本和能够单击闪烁的插入符号所在的位置之间交替。这可能是可以接受的。

【问题讨论】：

我尚未对其进行测试，但以编程方式选择所有文本会导致它滚动到字段的顶部/开头或底部/结尾，就像用户选择时一样通过按 ctrl-A （显然，假设输入了足够的文本可以滚动）？如果是这样，我会尽量避免在用户可能试图点击他们想要开始输入的点的鼠标点击事件上这样做。

标签： javascript jquery

【解决方案1】：

使用setTimeout 将其延迟一毫秒：

$('input[type="text"]').live('focus', function() {
    var inp = this;
    setTimeout(function() {
        inp.select();
    }, 1);
});

http://jsfiddle.net/HmQxZ/14/

发生的情况是，在您选择文本后，其他一些浏览器事件正在设置选择。因此，通过等待一毫秒，您可以让所有浏览器事件完成，然后选择文本。现在没有什么可以撤消它了。

【讨论】：

传奇。所有其他答案在跨浏览器兼容性方面仍然存在相同的问题。你知道导致这种情况的其他事件是什么吗？
@ajbeaven 我会尝试一个 event.preventDefualt() 它必须是你的事件被默认覆盖（什么都不选择）：api.jquery.com/event.preventDefault
您的答案解决了问题，添加 preventDefault 和 return false 就像其他建议的答案没有帮助。
@James 尝试在 Firefox 或 IE8 中的文本框上单击两次。在文本框的任意位置选择所有文本，然后再次尝试将插入符号移动到文本中的某个位置。第二次单击会重新选择所有文本并且不定位插入符号。
嗯，这种方法似乎还有另一个问题。见stackoverflow.com/questions/6869717/…

【解决方案2】：

你可能想添加

event.preventDefault();
return false;

到你的功能（第一个）。这可能会修复其他浏览器。

另外，将event添加到函数sig：

$('input[type="text"]').live('focus', function (event) {

【讨论】：

尝试在 Firefox 或 IE8 中单击文本框两次。在文本框的任意位置选择所有文本，然后再次尝试将插入符号移动到文本中的某个位置。第二次单击会重新选择所有文本并且不定位插入符号。

【解决方案3】：

如果你可以使用 jQuery，那么你可以做类似的事情；

$("#myInputField").focus(function(){
    // Select input field contents
    this.select();
});

// Add this behavior to all text fields
$("input[type=text]").focus(function(){
    // Select field contents
    this.select();
});

取自HERE

【讨论】：

【解决方案4】：

你应该记得像这样return false; event.stopPropagation(); event.preventDefault()：

$('input[type="text"]').live('click', function (event) {
    this.select();
    event.stopPropagation();
    event.preventDefault();
    return false;
});

http://jsfiddle.net/7rYLV/

【讨论】：