我有一个 div,其中包含一系列 span 标签,每个标签都包含一个文本字符串。我想将 jQuery 单击事件附加到所有跨度,以便单击任何跨度内的文本时,将自动选择整行文本(dom > insideText 对象)以方便拖放或复制/粘贴文本字符串。
例如,我的内容是...
<div id="mySpans">
<span> This is my text </span>
<span> This is my text </span>
</div>
如果光标单击跨度内的任何文本,我想选择该跨度内的文本,以便可以将其拖放(没有跨度标签,仅跨度的内部文本)作为副本。
jQuery 有简单的方法来做到这一点吗?
编辑:对我想要完成的任务的更详细解释:
如果没有脚本的帮助,为了复制文本 block ,用户必须手动在文本 block 上拖动选择一个选择矩形。然后,文本变为选定状态,表明单击和拖动事件将拾取所有选定的文本。因此,我尝试创建一个脚本,允许单击文本即可自动为用户选择文本,这样他们就不必自己手动执行此操作。
最佳答案
对。简短的回答是:你不能。
但是,这并不是很有帮助。因此,如果您准备接受一种稍微有点古怪的方法,并且至少有一个警告,您可以:
给定 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,在换行时形成一个更...“流动”(?)的矩形)。
但是,可能还有其他的。
<小时/> 编辑:添加我尝试使用input
s 而不是 textarea
可以预见的是,它的工作方式与 textarea
没有任何不同/更好。 ,还有<span contenteditable>
,(再次,不出所料)根本没有选择文本,而是在文本开头插入了插入符号。
叹息。我认为这个问题应该有一个更简单的答案,但我一生都看不到它。
关于jquery - 使用 jQuery 在单击时自动选择 span 标记内的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4165010/