单击时使用jQuery自动选择span标记内的文本 [英] Use jQuery to auto select text inside a span tag when clicked

问题描述

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

I have a div which contains a series of span tags, each containing a string of text. I'd like to attach a jQuery click event to all of the spans so that when the text inside any span is clicked, the entire line of text (dom > innerText object) will be auto selected to facilitate the drag/drop or copy/paste of the text string.

例如，我的内容是...

For example, my content is...

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

如果在跨度内的任何文本上单击光标，我想选择该跨度内的文本，以便可以将其拖放(不带跨度标签，仅跨度的innerText)作为副本.

If the cursor is clicked on any text inside a span, I want to select the text within that span, so that it can be drag/dropped (without the span tags, just the innerText of the span) as a copy.

jQuery有简单的方法吗?

Does jQuery have an easy means to do this?

我要完成的工作的详细说明:

A more detailed explanation of what I'm trying to accomplish:

在没有脚本帮助的情况下，为了复制文本块，用户必须在文本块上手动拖动选择矩形.然后，文本变为选中状态，表示单击&拖动事件将拾取所有选定的文本.因此，我正在尝试创建一个脚本，该脚本允许单击文本即可自动为用户选择文本，从而使他们不必自己手动进行操作.

Without aid of script, in order to copy a block of text, the user has to manually drag select a selection rectangle across the text block. The text then becomes selected signaling that a click & drag event will pick up all of the selected text. So I'm trying to create script that allows a single click on the text to automatically select the text for the user so they don't have to manually do it themselves.

推荐答案

正确.简短的答案是:您不能.

Right. The short answer is: you can't.

但是，这并不是真的很有帮助.因此，如果您准备接受一种稍微有点怪异的方法，并且至少要注意以下几点，则可以:

That, however, isn't really very helpful. So, if you're prepared to accept a slightly hacky approach, with at least one caveat, you can:

给出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:

You can use the following 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在何时形成更多...'fluid'(?)矩形包装).

The main caveat is that the element you want to copy cannot (with this approach at least) wrap from one line to the next (unless it's also display: block), I suspect it has something to do with how native form elements are rendered as 'solid' rectangles, unlike most other inline elements, such as html which form a more...'fluid'(?) rectangle when wrapping).

但是，可能还有其他人.

There may be others, however.

JS Fiddle演示程序可以显示它可以自动换行，只要父容器元素( span)仍然是display: block; .

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而不是textarea，可以预见的是，它与textarea以及<span contenteditable>的工作方式都不一样/更好.可以预测)根本没有选择文本，而是在文本的开头插入了插入符号.

---

Edited: to add that I tried using inputs instead of textarea which, predictably, failed to work any differently/better than textarea, and also <span contenteditable>, which (again, predictably) didn't select the text at all, but did insert the caret at the beginning of the text.

叹息.我认为对这个问题应该有一个容易得多的答案，但是我一生都看不到它.

Sigh. I think there should be a far easier answer to this question, but I can't see it for the life of me.

这篇关于单击时使用jQuery自动选择span标记内的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！