IE9 Javascript：等到选择结束答案

【问题标题】：IE9 Javascript: wait until selection endIE9 Javascript：等到选择结束
【发布时间】：2012-04-05 02:33:03
【问题描述】：

我有这个捕获所选文本的脚本，我只想在文本选择结束时做一些事情，而不是在选择过程中，浏览器仅限 IE9。

文本也可以通过双击一个单词来选择，在这种情况下，该函数也应该执行一次，当我使用onMouseUp时，这是两次。

<head>
  <script type="text/javascript">
    function selectedText(){
      var doc = document.selection;
      if(doc && doc.createRange().text.length != 0){
        log.innerHTML = doc.createRange().text;
      }
    }
  </script>
</head>
<body onselect="selectedText();">
  <span id=sp>this is the text from where you can select one or more words</span>
  <div id=log style="background-color=yellow;"></div>
</body>

【问题讨论】：

标签： javascript dom-events internet-explorer-9

【解决方案1】：

IE 支持Document 对象上的selectionchange 事件，它比select 事件更有用，但仍不会完全按照您的要求执行，因为双击过程可能会多次更改选择并且因此触发多个selectionchange 事件。

这是一个使用该事件的示例，该事件至少可以在 IE 6 中使用：

document.onselectionchange = function() {
    var sel = document.selection;
    if (sel.type == "Text") {
        var range = sel.createRange();
        document.getElementById("log") = range.text;
    }
};

如果你不关心早期版本的 IE，你可以使用 IE 9 对标准 DOM 范围和选择 API 的支持，然后这段代码也可以在 WebKit 中工作：

document.onselectionchange = function() {
    var sel = window.getSelection();
    if (sel.rangeCount > 0) {
        var range = sel.getRangeAt(0);
        document.getElementById("log") = range.toString();
    }
};

【讨论】：

在 IE9 中尝试了第二个，但是当我拖动选择时，我只能选择 1 或 2 个字符，然后就停止了

【解决方案2】：

没关系，想通了，这个供以后参考

<head>
    <script type="text/javascript">
        count = 0;
        function selectedText(){
          var doc = document.selection;
          if(doc && doc.createRange().text.length != 0){
            count++;
            log.innerHTML = "count: "+count+" "+doc.createRange().text;
          }
        }

        function AddEventHandler () {
          var sp = document.getElementById ("sp");
          if (sp.addEventListener) {   // all browsers except IE before version 9
            sp.addEventListener ("click", selectedText, false);
          } 
          else {
            if (sp.attachEvent) {    // IE before version 9
              sp.attachEvent ('onmouseup', selectedText);
            }
          }
        };
    </script>
</head>
<body onload=AddEventHandler()>
    <span id=sp>this is the text from where you can select one or more words</span>
    <div id=log style="background-color=yellow;"></div>
</body>

或者这个更短的版本

<head>
  <script type="text/javascript">
    count = 0;
    document.onselectionchange = function() { 
      count++;
      var sel = window.getSelection(); 
      if (sel.rangeCount > 0) { 
        var range = sel.getRangeAt(0); 
        document.getElementById("log") = count+":"+range.toString(); 
      } 
    }; 
  </script>
</head>
<body>
  <span id=sp>this is the text from where you can select one or more words</span>
  <div id=log style="background-color=yellow;"></div>

</body>

【讨论】：