如何使用JavaScript获取选定的文本

我有点困惑,为什么这个代码不工作!

HTML标记:

<div id="diva"><b>Score</b> some <i>goals</i></div>
<div id="soda"></div>

JavaScript代码:

function GetSelectedText () {
if (window.getSelection) {  // all browsers, except IE before version 9
    var range = window.getSelection ();
    alert (range.toString ());
} 
else {
    if (document.selection.createRange) { // Internet Explorer
        var range = document.selection.createRange ();
        alert (range.text);
    }
}
}

var butn = document.getElementById("soda");
butn.onclick = function(){
    GetSelectedText();
}

您可能遇到的一个问题是,在某些浏览器(特别是IE)中,按钮的click事件触发时,选择已被破坏。 您可以通过使用mousedown事件来修复此问题(它仍然允许选择被销毁,但仅在事件处理完成后)或通过使按钮不可选。

我假设你的按钮不是实际的按钮输入,因为这种行为只发生在普通的元素上。

演示:http://jsfiddle.net/L9bvU/1/


function getSelectedText() {
    if (window.getSelection) {
        txt = window.getSelection();
    } else if (window.document.getSelection) {
        txt =window.document.getSelection();
    } else if (window.document.selection) {
        txt = window.document.selection.createRange().text;
    }
    return txt;  
}
<p onmouseup="getSelectedText(); alert(txt)">
Highlight some of this text
with the mouse select press button end release
to fire the event. </p>


这是我的方式。 你只需要选择文本结束警报文本或其他任何东西。
有谁知道OnMouse(event)如何为html中的整个文档设置,并且不必直接添加到html页面。
另一方面,我们可以改变萤火虫中的元素!> - 例子


那么上面的代码有两个问题。 - 你不能保证

var butn = document.getElementById("soda");

将工作,因为它可能会在文档加载完成之前执行

- 当你点击另一个不是按钮的元素时,选择就会丢失。 如果你改变“苏打水”格,那么它将起作用:

<div id="diva"><b>Score</b> some <i>goals</i></div>
<div id="soda" onclick="GetSelectedText()">This will NOT work</div>
<input type="button" onclick="GetSelectedText()" value="This will work"/>

不过,我强烈建议你看看jQuery,因为这里的其他人已经建议了; 它会让你更容易!

链接地址: http://www.djcxy.com/p/41631.html

上一篇: How to get selected text with JavaScript

下一篇: How can I highlight the text of the DOM Range object?