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

Question

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

javascriptjqueryformstextareaselection

133

如何使得当你点击textarea内部时，它的整个内容都被选中？

并且当你再次单击时，取消选择。

- Alex

可能是重复的问题：JQuery：选择元素中的文本（类似于使用鼠标进行高亮）。 - Blender

5

@Blender：不，那个问题涉及在元素中突出显示文本，而不是在文本区域中。这两者是非常不同的。 - Tim Down

6个回答

15

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

- Matiesky

11

最终我使用了这个：

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

- Alex

1

@Alex：如果我是你，我不会过多地干预这个。用户期望文本区域具有标准行为。 - Tim Down

不，这个特定的文本区域只适用于复制粘贴。我里面的所有文本都是一个大的加密字符串，只能完全替换或复制到剪贴板中。 - Alex

@Alex：啊，对了。你可以通过添加“readonly”属性使其只读。 - Tim Down

@RobG：如果它是一个div，复制/粘贴将需要更多的代码（很可能是基于Flash的插件），而不是使用文本区域的内置剪贴板功能。 - Hollister

1

@Hollister：不，用户或脚本都可以完全可能选择div中的内容。你可能在考虑复制到剪贴板，但是如果没有像ZeroClipboard这样基于Flash的库，脚本中就无法实现。 - Tim Down

显示剩余3条评论

8

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

- Phil LaNasa

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/以获取示例。

- Ztyx

嗨，我测试了你的代码，它可以工作。目前，在我的情况下，我正在使用disabled属性在我的<textarea disabled>test</textarea>中，但它不起作用，那么如何修复它？ - mastersuse

4

选取元素中的文本（类似于用鼠标进行高亮）

:)

使用那篇帖子上被接受的答案，你可以像这样调用函数：

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

- Todd

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

同意 - 虽然原帖作者可能会从对她的实现进行补充说明中受益。 :) - Todd

那个问题涉及到在元素中突出显示文本，而不是在文本区域中。这两者是完全不同的。 - Tim Down

谢谢，我发现可以使用 $(this).select() 来实现这个功能，我会使用它，因为代码更简洁 :) - Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Down · Accepted Answer

为了防止用户在使用鼠标移动光标时每次选择整段文本而感到烦恼，你应该使用“focus”事件而非“click”事件来解决这个问题。下面的代码可以解决这个问题，并且可以解决 Chrome 中的一个问题，该问题会阻止最简单的版本（即仅在“focus”事件处理程序中调用文本区域的“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;
    });
});