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


Answers:


194

为了避免用户每次尝试使用鼠标移动插入符号时都被选中的整个文本感到烦恼,您应该使用focus事件而不是click事件来执行此操作。以下将完成工作并解决Chrome中导致最简单版本(即仅select()focus事件处理程序中调用textarea 方法)无法正常工作的问题。

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

10
我认为最好使用单独的“选择所有文本”按钮来实现这些内容,因为自动选择焦点或单击事件上的文本确实很烦人。
RobG

2
这对我来说在Chrome中失败了,有效的解决方案是:stackoverflow.com/a/6201757/126600
zack

@zack:此答案中的jsFiddle示例适用于Chrome。不适合您吗?我同意您链接的答案更加简单。
蒂姆(Tim Down)

@TimDown:您是对的,我有点过分热心-实际上它在“单击”上确实可以正常工作,但是如果您tab进入textarea ,则失败-您的其他解决方案在两种情况下都可以使用:)
zack

稍稍更改上面的代码,它将像魅力一样工作.. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); 您需要引用文本框,而不必使用this仅以完整路径引用它..并且它将起作用..
pratikabu 2012年

14

更好的方法,解决制表符和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;
            });
        }
    });

11

我最终使用了这个:

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

但我不知道如何检查文本是否已被选中,因此我可以撤消这两个操作:(
Alex

1
@亚历克斯:如果我是你,我不会对此太乱。用户期望文本区域具有标准行为。
蒂姆·唐

不,该特定的textarea仅用于复制粘贴。我在其中包含的所有文本都是一个大的加密字符串,只能完全替换或复制到剪贴板中
Alex

@Alex:嗯,对。您可能想要通过添加readonly属性使其变为只读。
蒂姆·唐

1
@Hollister:不,用户或脚本完全有可能在div中选择内容。您可能正在考虑复制到剪贴板,如果没有基于Flash的库(如ZeroClipboard),在脚本中是不可能的。
Tim Down


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/


4

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

:)

使用该帖子上可接受的答案,您可以像下面这样调用函数:

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

也许将此问题标记为重复可能更有用?这不是您的真正答案,因此最好合并两个问题。
Blender

同意-尽管OP可以从其实施的附加说明中受益。:)
Todd

该问题涉及在元素而不是文本区域中突出显示文本。两者是完全不同的。
蒂姆·唐

谢谢,我发现我可以用$(this).select(),我会用它,因为它的代码更少:)
Alex
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.