JavaScript - 在 DIV 中选择文本时更改按钮的值(并将其组合到一个简单的函数中)

Question

我有两个简单的 JavaScript 函数:getSelectedText() 和 doSomethingWithSelectedText()，我在另一个示例中找到了它们。

现在我已经根据我的需要对其进行了更多调整:http://jsfiddle.net/83T7U/ .

该示例当前可以运行，但未按应有的方式运行。目前，当选择文本时，会出现 alert()，但按钮上的文本应从 Reply 更改为 Quote。

所以，相反:

alert("Text selected - it should change "Reply" to "Quote" text button ONLY if text was selected within one of these DIVs and text should change only in the div within which the text was selected.");

它应该类似于 document.getElementsByTagName("button") 或类似的。

我的目标是:

1. 一旦选择了特定 div 中的文本，就将按钮的值从 Reply 更改为 Quote。取消选择文本后，按钮应变回回复。

2. 确保回复<>引用更改仅在这些DIVS之一中选择文本时应用(而不是在页面的其他部分)。

3. 最小化功能 - 我认为一个功能就足够了，而不是两个功能，因为我不想知道选择的值 - 我只想检查是否有某些东西(即至少一个字符)已选择/突出显示。

4. JavaScript 应能在所有主要浏览器中正常工作。

请注意我不能在这里使用 jQuery。谢谢!

HTML:

<div id="first" style="background:yellow">DIV1: First some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="second" style="background:green">DIV2: Second some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="third" style="background:lightblue">DIV3: Third some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
    <i>(there could be more similar divs on a page)</i>

JavaScript:

function getSelectedText() {
    var text = "";
    if (typeof window.getSelection != "undefined") {
        text = window.getSelection().toString();
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        text = document.selection.createRange().text;
    }
    return text;
}

function doSomethingWithSelectedText() {
    var selectedText = getSelectedText();
    if (selectedText) {
        alert("Text selected - it should change Reply to Quote text button ONLY if text was selected within one of these DIVs and text should change only in the div within which the text was selected.");
    }
}

document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;

Answer 1

看看this fiddle

具有以下 html(您的带有额外的 div 类):

<div id="first" class="specialDiv" style="background:yellow">DIV1: First some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="second"  class="specialDiv" style="background:green">DIV2: Second some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="third"  class="specialDiv" style="background:lightblue">DIV3: Third some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
    <i>(there could be more similar divs on a page)</i>

和 JavaScript:

 function doSomethingWithSelectedText() {
       //relabel quoteButton to standard-label
          var buttons = document.getElementsByClassName('quoteButton');
            if(buttons.length){
                var button = buttons[0];
                button.innerHTML = 'Reply';
                var classArr = button.className.split(' ');
                classArr.splice(classArr.indexOf('quoteButton'), 1);
                button.className = classArr.join(' ');
           }

        //check if new quoteButton should be labeled
        if (window.getSelection && window.getSelection().toString()) {
            if(window.getSelection().anchorNode.parentNode && window.getSelection().anchorNode.parentNode.className && window.getSelection().anchorNode.parentNode.className.split(' ').indexOf('specialDiv') > -1){
               var button = window.getSelection().anchorNode.parentNode.getElementsByTagName('button')[0];
               button.innerHTML = 'Quote';
               button.className += ' quoteButton';
            }
        }
    }    
    document.onmouseup = doSomethingWithSelectedText;
    document.onkeyup = doSomethingWithSelectedText;

在 this article提到获取由 window.getSelection().anchorNode.parentNode 选择的元素。所以我只是检查所选元素是否具有新添加的类“specialDiv”。如果它有搜索按钮并重新标记它。另外，向按钮添加一个类，以便能够再次找到重新标记的按钮。在任何选择中，先将按钮重置为标准标签，然后再重新标记其他按钮。

编辑:
有点悲伤，但上面的解决方案有一种行不通的方法:选择文本，然后单击它。这是在 mouseup-event 的时间点仍然设置旧的 selectedText 的唯一方法(并且将在 mouseup-event 后立即取消设置)。

要解决此问题，请使用 onclick 而不是 onmouseup
看this fiddle ...它使用 onclick 而不是 keyup，因为在任何情况下都会在新选择已设置的时间点触发 click