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

Question

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

例如，我的内容是...

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

如果光标单击跨度内的任何文本，我想选择该跨度内的文本，以便可以将其拖放(没有跨度标签，仅跨度的内部文本)作为副本。

jQuery 有简单的方法来做到这一点吗？

编辑:对我想要完成的任务的更详细解释:

如果没有脚本的帮助，为了复制文本 block ，用户必须手动在文本 block 上拖动选择一个选择矩形。然后，文本变为选定状态，表明单击和拖动事件将拾取所有选定的文本。因此，我尝试创建一个脚本，允许单击文本即可自动为用户选择文本，这样他们就不必自己手动执行此操作。

Answer 1

对。简短的回答是:你不能。

但是，这并不是很有帮助。因此，如果您准备接受一种稍微有点古怪的方法，并且至少有一个警告，您可以:

给定 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/ .

主要需要注意的是，您想要复制的元素不能(至少使用这种方法)从一行换行到下一行(除非它也是 display: block )，我怀疑这与原生程度有关form与大多数其他元素不同，元素被渲染为“实心”矩形 inline元素，例如 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; .

<小时/> 编辑:添加我尝试使用 input s 而不是 textarea可以预见的是，它的工作方式与 textarea 没有任何不同/更好。 ，还有 <span contenteditable> ，(再次，不出所料)根本没有选择文本，而是在文本开头插入了插入符号。

叹息。我认为这个问题应该有一个更简单的答案，但我一生都看不到它。