检测选定的文本不能正常工作

Question

我正在尝试使用javascript来检测div中的文本是否被选择为textarea格式。HTML是这样的：

<div id="rte-test" class="rich-text-editor">
    <ul class="toolbar">
        <li> <a href="#" class="command" id="...">...</a> </li>
    </ul>
    <div class="textarea" id="textareaContent" contentEditable="true"></div>
</div>

我尝试了这个javascript代码：

var command = document.getElementsByClassName("command");

for(var i=0; i<command.length; i++) {
  command[i].addEventListener("click", function() {
    var btn = this;
    var content = window.document.getElementById("textareaContent");
    if (content.getSelection) {
      console.log(content.getSelection() + ' selected. ' + btn.id);
    } else {
      console.log('nothing is selected. ' + btn.id);
    }
  });
}

使用此代码，即使在if/else上选择了某些内容，也只有"nothing is select“选项是由textarea实现的。

我也试过这个：

var command = document.getElementsByClassName("command");

for(var i=0; i<command.length; i++) {
  command[i].addEventListener("click", function() {
    var btn = this;
    if (window.getSelection) {
      console.log(window.getSelection() + ' selected. ' + btn.id);
    } else {
      console.log('nothing is selected. ' + btn.id);
    }
  });
}

使用此代码，即使没有选择任何内容，if/else也只会达到" selected“选项。

有人知道怎么解决这个问题吗？

Answer 1

试一试

    if (window.getSelection().toString()) {
      console.log(window.getSelection() + ' selected. ' + btn.id);
    } else {
      console.log('nothing is selected. ' + btn.id);
    }

window.getSelection()返回一个非空对象，因为它不是空的，所以它始终是真的。当您将window.getSelection()放入console.log中时，会自动调用toString()。