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

Question

我有一个包含一系列span标签的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标记,只是跨度的innerText)作为副本.

jQuery有一个简单的方法吗？

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

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

Answer 1

对.简短的回答是:你做不到.

然而,这并不是非常有用.所以,如果你准备接受一个略带hacky的方法,至少有一个警告,你可以:

鉴于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演示,请访问:http://jsfiddle.net/davidThomas/ZmYBh/.

主要的警告是你要复制的元素不能(至少用这种方法)从一行换行到下一行(除非它也是display: block),我怀疑它与本机form元素如何呈现为"实心"矩形有关,与大多数其他inline元素不同,例如html,它在包装时形成一个更"......流畅"(？)的矩形.

但是,可能还有其他人.

JS Fiddle演示,只要父容器元素(span)仍然存在,它就可以显示包装文本display: block;.

编辑:添加我尝试使用inputs而不是textarea,可以预测,无法以任何不同/更好的方式工作textarea,而且<span contenteditable>,(再次,可预测)根本没有选择文本,但确实在开头插入了插入符号的文字.

叹.我认为应该有一个更容易回答这个问题的答案,但我不能在我的生活中看到它.

Answer 2

使用DOM范围:http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

var span = ...
var range = document.createRange();
range.setStartBefore(span.firstChild);
range.setEndAfter(span.lastChild);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

Answer 3

发现这个核心-javascript解决方案运行良好且无黑客攻击:http: //coderzone.org/library/Select-text-in-a-DIV-SPAN-or-table-cell_1047.htm

我冒昧地改变了代码,以便它接受元素节点作为参数而不是元素id.

// Selects text inside an element node.
function selectElementText(el) {
    removeTextSelections();
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
    else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(el);
        window.getSelection().addRange(range);
    }
}

// Deselects all text in the page.
function removeTextSelections() {
    if (document.selection) document.selection.empty(); 
    else if (window.getSelection) window.getSelection().removeAllRanges();
}