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

Question

我有点困惑为什么这段代码不起作用！

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();
}

Answer 1

您可能会遇到的一个问题是，在某些浏览器（尤其是 IE）中，当按钮的click事件触发时，选择已被破坏。您可以通过使用mousedown事件来解决此问题（它仍然允许销毁选择，但仅在处理事件之后），或者通过使按钮 unselectable。

我假设您的按钮不是实际的按钮输入，因为这种行为只发生在常规元素上。

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

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);
        }
    }
}

span {
    background-color: #ccc;
    padding: 3px;
    border: solid gray 1px;
    
}

*[unselectable="on"] {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

<div contenteditable="true">Please select some of this text and press a button below</div>

<span onclick="GetSelectedText()">Click</span>
<span onmousedown="GetSelectedText()">Mousedown</span>
<span unselectable="on" onclick="GetSelectedText()">Click, unselectable</span>

Answer 2

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection();
    } 
    if (window.document.getSelection) {
        return window.document.getSelection();
    } 
    if (window.document.selection) {
        return window.document.selection.createRange().text;
    }
    return "";  
}

<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 页面。
另一方面，我们可以改变萤火虫中的元素！>-示例

Answer 3

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

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

将起作用，因为它可能在文档完成加载之前执行

- 当您单击另一个不是按钮的元素时，选择会丢失。如果您将“苏打水” div 更改为，那么它将起作用：

<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；它会让你的喜欢更容易！