我有一个div,它包含一系列跨标签,每个标签都包含一串文本.我想附加一个jQuery点击事件到所有的跨度,以便当任何跨度内的文本被点击时,整个文本行(dom> innerText对象)将被自动选择,以方便拖放或复制/粘贴文本字符串.
例如,我的内容是…
<div id="mySpans"> <span> This is my text </span> <span> This is my text </span> </div>
如果光标点击了跨度中的任何文本,我想选择该范围内的文本,以便可以将其拖放(不包括span标签,只是span的innerText)作为副本.
jQuery有没有办法做到这一点？
编辑：对我正在努力完成的更详细的解释：
没有脚本的帮助,为了复制文本块,用户必须手动拖动在文本块中选择一个选择矩形.然后,该文本被选择,表示点击&拖动事件将拾取所有选定的文本.所以我正在尝试创建脚本,允许单击文本以自动为用户选择文本,这样他们就不必手动自己做.
解决方法
对.简短的答案是：你不能.
但是,这并不是非常有用的.所以,如果你准备接受一个稍微黑客的方法,至少有一个警告,你可以：
给定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/.
主要的注意事项是,您要复制的元素不能(至少使用此方法)从一行转换到下一行(除非它也显示：block),我怀疑它与本机表单元素的呈现方式有关不像大多数其他内联元素,比如html,在包装时形成一个更多的’流体'(？)矩形).
可能还有其他的.
编辑：补充说,我尝试使用输入,而不是textarea,这可以预测,不能与textarea不同/更好的工作,以及< span contenteditable>,(再次,可预测)根本没有选择文本,但是在文本开头插入插入符号.
叹.我认为这个问题应该是一个很简单的答案,但我看不到我的生活.
