单击时，使用jQuery自动选择span标记内的文本
我有一个包含一系列span标签的div，每个标签包含一串文本。 我想将jQuery单击事件附加到所有跨度，以便在单击任何跨度内的文本时，将自动选择整行文本（dom> innerText对象）以方便拖放或复制/粘贴文本字符串。
例如，我的内容是……
This is my text This is my text 如果在跨度内的任何文本上单击光标，我想选择该跨度内的文本，以便可以将其拖放（没有span标记，只是跨度的innerText）作为副本。
jQuery有一个简单的方法吗？
编辑：我正在努力完成的更详细的解释：
在没有脚本帮助的情况下，为了复制文本块，用户必须手动拖动选择文本块中的选择矩形。 然后，文本被选中，表示点击和拖动事件将拾取所有选定的文本。 因此，我正在尝试创建脚本，允许单击文本以自动为用户选择文本，这样他们就不必自己手动执行。
对。 简短的回答是： 你做不到 。
然而，这并不是非常有用。 所以，如果你准备接受一种略带hacky的方法，至少有一个警告，你可以：
鉴于html：
This is some text to copy. Can't copy this (automatically...)! And this is yet more text.
而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(); $('') .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; 。
编辑：添加我尝试使用input s而不是textarea ，可以预见，无法以不同的方式/优于textarea ，并且 ，（再次，可预测）根本没有选择文本，但是确实在文本的开头插入了插入符号。
叹。 我认为这个问题应该有一个更容易的答案，但我不能在我的生活中看到它。
使用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);
找到了这个核心-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(); }
tbleckert走在正确的轨道上。 .select（）事件仅适用于输入，因此您需要将变为输入，然后将其设置为没有背景，没有边框和没有聚焦环的样式。 然后，你可以这样做：
然后你的jQuery看起来像这样
$('input.selectOnClick').click(function(){ $(this).select(); });
这是未经测试的代码，但应指向正确的方向。
我想做类似的事情。 我的网站有引号，我希望用户能够轻松复制。 我还想将作者的名字添加到字符串中。
通常，我有用户选择设置为无，所以我创建了一个在需要时以编程方式应用的类…
.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中的说明进行了修改）。
检查select（）事件:)
$("span").click(function(){ var mytext = $(this).text() })
将文本放在一个javascript变量中…但是看看jQuery Ui可能会更快，特别是可拖动的 。
尝试类似的东西
$('#mySpans span').hover(function() { $(this).addClass('spanhover'); }, function() { $(this).removeClass('spanhover'); });
你动态添加你在CSS部分中定义的类“spanhover”的地方
#mySpans.spanhover {background-color:yellow;}