Question

我有一个包含一系列span标签的div，每个标签包含一串文字。我想将jQuery单击事件附加到所有跨度，以便在单击任何跨度内的文本时，将自动选择整行文本（dom＆gt; 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 demo, at: http://jsfiddle.net/davidThomas/ZmYBh/。

主要的警告是你要复制的元素不能（至少用这种方法）从一行换行到下一行（除非它也是{{1 }}），我怀疑它与本地display: block元素如何呈现为“实心”矩形有关，与大多数其他form元素不同，例如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;

<小时/> 已编辑添加我尝试使用inline代替input，但可以预见，这种情况与textarea以及{{ 1}}，（再次，可预测）根本没有选择文本，但确实在文本的开头插入了插入符号。

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

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

Answer 4

tbleckert走在正确的轨道上。 .select（）事件仅适用于输入，因此您需要将<span>变为输入，然后将其设置为没有背景，没有边框和没有聚焦环的样式。然后，你可以这样做：

<input type="text" style="border:none; background:transparent; outline: none;" class="selectOnClick" />

然后你的jQuery看起来像这样

$('input.selectOnClick').click(function(){ $(this).select(); });

这是未经测试的代码，但应指向正确的方向。

Answer 5

我想做类似的事情。我的网站有引号，我希望用户能够轻松复制。我还想将作者的名字添加到字符串中。

通常，我将user-select设置为none，因此我创建了一个在需要时以编程方式应用的类...

.editable {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
}

所有引号都在名为“paragraph_quote”的类中。当站点访问者单击引号时，将发生以下序列：

$(".paragraph_quote").on("click", function() {
    var addendum = " [by Author]";

    if (! $(this).attr("contenteditable") || $(this).html().indexOf(addendum) === -1) {     
            $(this).removeData("quote")
            .data("quote", $(this).html())
            .html($(this).html() + addendum)
            .attr("contenteditable", true)
            .addClass("editable")
            .focus()
        ;
    }
    document.execCommand('selectAll', false, null);
}).on("blur", function() {
    $(this).removeClass("editable").html($(this).data("quote"));
});

查看是否已执行以下步骤（即，用户是否在同一段落内第二次点击）。如果是第一次，请执行步骤2到7.如果不是，请执行步骤8.
如果这不是第一次点击引用，则删除可能已存储的所有数据。
将报价的HTML存储为数据。这允许您修改副本的HTML（如果您愿意），然后轻松将其恢复到原始状态。
将任何其他文本（例如作者姓名）添加到HTML。未显示如下：我还使用.replace（）删除任何特殊的HTML字符，如非破坏空格，em-dashes等。
使该段落可编辑。
添加可编辑的课程。
将焦点设置为段落。可编辑的类确保焦点轮廓的外观。
选择可编辑段落的完整内容。并非此步骤很有用，即使已经采取了其他步骤，因为如果用户在选择中单击，则会导致整个选择重新突出显示。
当用户点击段落外，删除可编辑的类并...
将HTML恢复到之前的状态（如果您按照上面步骤4中的说明进行了修改）。

Answer 6

检查select()事件：）

Answer 7

$("span").click(function(){
var mytext  = $(this).text()
})

将文本放在javascript变量中...但是查看jQuery Ui可能会更快，特别是draggable。

Answer 8

尝试类似

的内容

$('#mySpans span').hover(function() {
    $(this).addClass('spanhover');
}, function() {
    $(this).removeClass('spanhover');
});

您可以动态添加在CSS部分中定义的类“spanhover”，例如

#mySpans.spanhover {background-color:yellow;}

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

8 个答案: