使用jQuery自动选择文本内部的span标记内的文本

我有一个包含一系列span标记的div，每个标记都包含一个文本字符串。我想附加一个jQuery点击事件到所有跨度，这样当点击任何跨度内的文本时，整行文本（dom> innerText对象）将被自动选中，以方便拖放或复制/粘贴文本字符串。使用jQuery自动选择文本内部的span标记内的文本

例如，我的内容是......

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

如果光标点击跨度内的任何文字，我想选择范围内的文本，以便它可以拖/下降（没有span标签，只是span的innerText）作为副本。

jQuery是否有一个简单的方法来做到这一点？

编辑：什么我试图完成更详细的解释：

没有脚本的援助，以复制文本块，用户必须手动将选择整个文本选择矩形块。文本然后变为选中信号，点击&拖动事件将拾取所有选定的文本。所以我试图创建一个脚本，允许单击文本来自动为用户选择文本，所以他们不必手动自己做。

来源

2010-11-12 Scott B

我认为，出于安全原因，不允许操纵用户选择。这将是非常邪恶的。这就好像某人说“嗨”，你会让他说“我想要一个比萨饼”，接受它作为比萨饼的订单，并让他支付它... – 2010-11-12 14:07:20

@Justin，也许，但我'只是让用户在这种情况下选择一个文本块更简单。该脚本只是被用作允许点击事件（他们发起）来完成选择（许多用户觉得难以做到）的快捷方式。 – 2010-11-12 14:20:20

@Justus，是的，但是无论如何，你会在服务器端做到这一点，让客户*看到*你的命令搞砸了'恶'级别的低端（和愚蠢的高端'scale）... = b – 2010-11-13 12:51:19

没错。简短的回答是：你不能。

然而，这并不是很有帮助。所以，如果你愿意接受一个稍微哈克方法，至少有一点需要注意，您可以：

由于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！而非 textarea其中，可以预见，未能奏效任何不同/优于 textarea，也 <span contenteditable>，这（再次，可以预见）没有选择文字，但在文本的开头插入了脱字符号。

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

来源

2010-11-13 12:50:01

谢谢大卫。我很感谢你的回答。 – 2010-11-15 19:53:00

你绝对欢迎，我知道这不是你想要的，但我希望它有一点帮助，至少... =/ – 2010-11-15 20:01:39

它可以帮助我，谢谢 – 2013-12-23 04:14:32

检查select()事件:)

来源

2010-11-12 13:35:39 tbleckert

select（）仅用于文本 - 输入元素... – 2010-11-12 14:01:11

那么，当时我在这里是新的，这就像两年前..给我一个休息时间：PI完全同意你，虽然 – tbleckert 2012-08-18 22:29:57

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

将使文本在JavaScript变量...但它可能会更快地看看jQuery用户界面，特别是draggable。

来源

2010-11-12 13:38:11 NimChimpsky

我认为他只是想文本突出显示，以便文本可以通过上下文菜单复制。我不确定他希望将它分配给JavaScript变量。 – 2010-11-12 13:39:29

@David：是的，通过上下文菜单复制或拖放到内容中。如果选择了文本，它通常会自动拖动。由于目标是WordPress内容编辑器，因此拖放区域已经准备好拖放。 – 2010-11-12 14:22:08

@David：我认为你对自己想做的事有最好的理解。有什么建议么？ – 2010-11-12 14:23:15

试着这么做

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

，你动态地添加一个类 “spanhover” 你在CSS部分定义像

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

来源

2010-11-12 13:39:15 initall

我想他希望它可以作为文本选择到上下文菜单（或任何）复制到剪贴板;我不认为他在试图塑造它。 – 2010-11-12 13:41:12

@David：但他写道“......文字会......突出显示......”。正如@NimChimpsky指出的那样，隐藏的问题的第二部分可以通过'可拖动'的ui代码完成。 – initall 2010-11-12 13:53:03

大卫是对的。对我而言，不好的选择。在这方面，我的意思是选择，而不是风格。 – 2010-11-12 14:10:51

tbleckert是在正确的轨道上。 .select（）事件只能用于输入，所以你需要让你的<span>成为输入，然后在没有背景，无边框和没有聚焦环的情况下对其进行设置。然后，你可以这样做：

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

，然后你的jQuery会是这个样子

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

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

来源

2010-11-12 13:56:07 jxpx777

由于此代码驻留在驻留在WordPress编辑器中的插件中，并且位于父窗体标记中，因此在保存或发布帖子时，输入元素的外观是否会改变发布后事件？我不想在这种情况下为提交添加噪音。 – 2010-11-12 14:33:45

外观应该不重要，并且该字段仍然应该是可编辑的。 – jxpx777 2010-11-12 18:10:26

我不希望这些字段是可编辑的。它们是只读的，仅用于复制/粘贴或拖放到内容中。 jQuery是否有一个用于在元素的innerText上进行文本选择的方法？这就是我在这里寻找的。 – 2010-11-12 20:12:48

使用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);

来源

2011-06-01 23:19:00 Evan

发现这个核心的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(); 
}

来源

2012-05-18 02:58:20

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

通常情况下，我有用户选择设置为无，所以我创建需要时以编程方式应用类...

.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所示，上文）。

来源

2013-12-08 20:49:10

使用jQuery自动选择文本内部的span标记内的文本

回答

相关问题