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

jQuery - select all text from a textarea

提问by Alex

How can I make it so when you click inside a textarea, its entire content gets selected?

当您在 textarea 内单击时，如何使其全部内容被选中？

And eventually when you click again, to deselect it.

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

回答by Tim Down

To stop the user from getting annoyed when the whole text gets selected every time they try to move the caret using their mouse, you should do this using the focusevent, not the clickevent. The following will do the job and works around a problem in Chrome that prevents the simplest version (i.e. just calling the textarea's select()method in a focusevent handler) from working.

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

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

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

Code:

代码：

<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 version:

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

回答by Matiesky

Better way, with solution to tab and chrome problem and new jquery way

更好的方法，解决 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;
            });
        }
    });

回答by Alex

I ended up using this:

我最终使用了这个：

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

回答by Ztyx

Slightly shorter jQuery version:

稍微短一点的 jQuery 版本：

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

It handles the Chrome corner case correctly. See http://jsfiddle.net/Ztyx/XMkwm/for an example.

它可以正确处理 Chrome 角落案例。有关示例，请参见http://jsfiddle.net/Ztyx/XMkwm/。

回答by Phil LaNasa

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

回答by Todd

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

选择元素中的文本（类似于用鼠标突出显示）

:)

:)

Using the accepted answer on that post, you can call the function like this:

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

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