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

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.

最终当你再次点击时，取消选择。

6 个解决方案

#1

179

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 focus event, not the click event. 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 focus event handler) from working.

为了防止用户在每次使用鼠标移动插入符号时选择整个文本时感到烦恼，应该使用焦点事件而不是单击事件。下面的代码将完成这项工作，并解决Chrome中阻止最简单版本(即在焦点事件处理程序中调用textarea的select()方法)工作的问题。

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

#2

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

更好的方法，有解决选项卡和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

I ended up using this:

最后我用了这个:

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

#4

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/。

#5

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

#6

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

#1

179