单击时,使用jQuery自动选择跨标签内的文本

我有一个div,它包含一系列跨标签,每个标签都包含一串文本.我想附加一个jQuery点击事件到所有的跨度,以便当任何跨度内的文本被点击时,整个文本行(dom> innerText对象)将被自动选择,以方便拖放或复制/粘贴文本字符串.

例如,我的内容是…

<div id="mySpans">
  <span>&nbsp;This is my text&nbsp;</span>
  <span>&nbsp;This is my text&nbsp;</span>
</div>

如果光标点击了跨度中的任何文本,我想选择该范围内的文本,以便可以将其拖放(不包括span标签,只是span的innerText)作为副本.

jQuery有没有办法做到这一点？

编辑：对我正在努力完成的更详细的解释：

没有脚本的帮助,为了复制文本块,用户必须手动拖动在文本块中选择一个选择矩形.然后,该文本被选择,表示点击&拖动事件将拾取所有选定的文本.所以我正在尝试创建脚本,允许单击文本以自动为用户选择文本,这样他们就不必手动自己做.

解决方法

对.简短的答案是：你不能.

但是,这并不是非常有用的.所以,如果你准备接受一个稍微黑客的方法,至少有一个警告,你可以：

给定html：

<div id="wrap">
    <span class="copyText">This is some text to copy.</span>
    <span>Can't copy <em>this</em> (automatically...)!</span>
    <span class="copyText">And this is yet more text.</span>
</div>

和CSS：

span.copyText {
    position: relative;
    display: block;
}
textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 none transparent;
    margin: 0;
    padding: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    font-family: inherit;
    font-size: 1em;
}

您可以使用以下jQuery：

$(document).ready(
    function() {
        $('.copyText').click(
            function() {
                if ($('#tmp').length) {
                    $('#tmp').remove();
                }
                var clickText = $(this).text();
                $('<textarea id="tmp" />')
                    .appendTo($(this))
                    .val(clickText)
                    .focus()
                    .select();
        return false;
    });
$(':not(.copyText)').click(
    function(){
        $('#tmp').remove();
    });

});

有必要的JS Fiddle demo,at: http://jsfiddle.net/davidThomas/ZmYBh/.

主要的注意事项是,您要复制的元素不能(至少使用此方法)从一行转换到下一行(除非它也显示：block),我怀疑它与本机表单元素的呈现方式有关不像大多数其他内联元素,比如html,在包装时形成一个更多的’流体'(？)矩形).

可能还有其他的.

JS Fiddle demo to show that it does work with wrapping text,so long as the parent container element (span) is still display: block;.

编辑：补充说,我尝试使用输入,而不是textarea,这可以预测,不能与textarea不同/更好的工作,以及< span contenteditable>,(再次,可预测)根本没有选择文本,但是在文本开头插入插入符号.

叹.我认为这个问题应该是一个很简单的答案,但我看不到我的生活.

原文地址：https://www.jb51.cc/jquery/179707.html

单击时,使用jQuery自动选择跨标签内的文本

解决方法

相关推荐