jQuery - 从文本区域中选择所有文本答案

【问题标题】：jQuery - select all text from a textareajQuery - 从文本区域中选择所有文本
【发布时间】：2011-08-13 10:37:37
【问题描述】：

我怎样才能使当您在文本区域内单击时，它的全部内容都会被选中？

最终，当您再次单击时，取消选择它。

【问题讨论】：

JQuery: Selecting Text in an Element (akin to highlighting with your mouse) 的可能重复项
@Blender：不，这个问题涉及突出显示元素中的文本，而不是文本区域。两者完全不同。

标签： javascript jquery forms textarea selection

【解决方案1】：

为了防止用户在每次尝试使用鼠标移动插入符号时选择整个文本时感到恼火，您应该使用focus 事件而不是click 事件来执行此操作。以下将完成这项工作并解决 Chrome 中阻止最简单版本（即仅在 focus 事件处理程序中调用 textarea 的 select() 方法）无法工作的问题。

jsFiddle：http://jsfiddle.net/NM62A/

代码：

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

jQuery 版本：

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

【讨论】：

我认为最好使用单独的“选择所有文本”按钮来实现这些东西，因为自动选择焦点或点击事件上的文本真的很烦人。
这在 Chrome 中对我来说失败了，工作解决方案是：stackoverflow.com/a/6201757/126600
@zack：这个答案中的 jsFiddle 示例在 Chrome 中适用于我。不适合你吗？我同意您链接到的答案更加万无一失。
@TimDown：你是对的，我有点过分热心 - 实际上它在“点击”时确实可以正常工作，但如果你 tab 进入 textarea 则会失败 - 你的其他解决方案适用于两种情况:)
稍微改变上面的代码，它会像一个魅力一样工作。$("#foo").mouseup(function() {$("#foo").unbind("mouseup");return false;});你需要引用文本框而不使用this只需完整引用它路径..它会工作..

【解决方案2】：

更好的方式，解决tab和chrome问题以及新的jquery方式

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

【讨论】：

【解决方案3】：

我最终使用了这个：

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

【讨论】：

但是我不知道如何检查文本是否已经被选中，所以我可以反转这两个动作:(
@Alex：如果我是你，我就不会在这方面搞得太多。用户期望文本区域的标准行为。
不，这个特殊的文本区域仅用于复制粘贴。我里面的所有文本都是一个大的加密字符串，只能完全替换或复制到剪贴板
@Alex：啊，对。您可能希望通过添加 readonly 属性将其设为只读。
@Hollister：不，用户或脚本都可以在 div 中选择内容。您可能正在考虑复制到剪贴板，如果没有像 ZeroClipboard 这样的基于 Flash 的库，这在脚本中是不可能的。

【解决方案4】：

$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

【讨论】：

【解决方案5】：

略短的 jQuery 版本：

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

它可以正确处理 Chrome 角盒。示例见http://jsfiddle.net/Ztyx/XMkwm/。

【讨论】：

嗨，我已经测试了你的代码并且它正在工作。目前，在我的情况下，我在我的<textarea disabled>test</textarea> 中使用disabled 属性，但它不起作用，那么如何解决它？

【解决方案6】：

Selecting text in an element (akin to highlighting with your mouse)

:)

使用该帖子上接受的答案，您可以像这样调用函数：

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

【讨论】：

也许将此问题标记为重复可能更有用？这不是你的答案，所以最好将这两个问题合并。
同意——尽管 OP 可以从她的实施的附加解释中受益。 :)
该问题涉及突出显示元素中的文本，而不是文本区域。两者完全不同。
谢谢，我发现我可以用$(this).select() 来做这个，我会用它，因为它的代码更少:)