Question

管理从textarea中获取突出显示的文本并将其传输到另一个textarea。但是当编辑代码以便从div中获取突出显示的文本时，它就不起作用了......

为什么会发生这种情况？谢谢。

<div id="quote"> load transcript in here instead and grab text from here</div> // does not work

<textarea id="quote" readonly> // works
load transcript in here
</textarea>


<textarea contenteditable="false" id="output" name="selected"></textarea> // outputs highlighted text here


<script>

var quotearea = document.getElementById('quote')
var output = document.getElementById('output')
quotearea.addEventListener('mouseup', function(){
    if (this.selectionStart != this.selectionEnd){ // check the user has selected some text inside field
        var selectedtext = this.value.substring(this.selectionStart, this.selectionEnd)
        output.innerHTML = selectedtext
    }
}, false)

</script>

小提琴：

https://jsfiddle.net/Lzgyh2kd/

Answer 1

我在评论中回答了您的问题并将其删除了。

您正在使用仅适用于输入元素的selectionStart和selectionEnd方法。对于您使用的解决方案而不是document.selection.createRange().text来获取文档中的选定文本（输入，div等等，并不重要）。

这是小提琴：

Working demo

Answer 2

评论中有人用一个有两个textarea的小提琴回答它，但是编辑了一个div，它似乎有效。干杯。（编辑 - 结果不需要div，它直接来自页面，所以解决方法）

<div name="" id="original">
Load transcript in here.
</div>

<textarea name="" id="copied" cols="30" rows="10"></textarea>

<script>


var text = '';
function copyText(e) {
    text = (document.all) ? document.selection.createRange().text : document.getSelection();
    document.getElementById('copied').value = text;
}
document.onmouseup = copyText;
if (!document.all) {
    document.captureEvents(Event.MOUSEUP);
}


</script>

在这里工作小提琴：

https://jsfiddle.net/eLwy4eLp/1/

从div获取突出显示的文本并复制到textarea javascript

2 个答案: