document.selection.createRange() 在 chrome 和 safari 中不起作用

Question

我正在使用帶有文本模式的文本框作為多行選項，它在 IE 中工作正常，Mozilla 問題出現在 Chrome 和 safari 中。 示例代碼如下

<asp:TextBox ID="txtRootDescription" onpaste="DoPaste(this);" Width="600px" Rows="10" Columns="72" MaxLength="500" TextMode="MultiLine" runat="server"></asp:TextBox>

function DoPaste(control) {
maxLength = control.attributes["maxlength"].value;   
if (maxLength) {        
    var oTR = control.document.selection.createRange();     
}}

在 chrome 中，它給了我一個錯誤，因為“無法讀取未定義的屬性‘選擇’”

Answer 1

在非 IE（不包括 IE9）瀏覽器（見注釋）中，使用window.getSelection獲取選擇 object。 在 IE < 9 中，原始代碼應該可以工作。

function GetSelection () {
    if (window.getSelection) {  // all browsers, except IE before version 9
        var selectionRange = window.getSelection ();                                        
        return selectionRange.toString();
    } 
    else {
        if (document.selection.type == 'None') {
            return "";
        }
        else {
            var textRange = document.selection.createRange ();
            return textRange.text;
        }
    }
}

function DoPaste(control) {
    maxLength = control.attributes["maxlength"].value;   
    if (maxLength) {        
        var oTR = GetSelection();     
    }
}

一般來說，使用selection和ranges非常棘手，因為瀏覽器支持變化很大。

這是一個很好的參考，列出了瀏覽器支持（以及哪些代碼在哪里工作）和在相應瀏覽器中工作的示例代碼： http://help.dottoro.com/ljefwsqm.php

Answer 2

在文檔中獲取選定文本時存在許多問題，主要與是否在表單控件中選擇文本或作為其他元素的文本有關。 嘗試執行以下操作的 function：

function checkForSelectedText(e) {
  var e = e || window.event;
  var el = e.target || e.srcElement;
  var tagName = el.tagName && el.tagName.toLowerCase();
  var t;
  var d = document;

  // Try DOM 2 Range - for most browsers, including IE 6+
  // However, doesn't get text selected inside form controls
  // that allow selection of text content (input type text, 
  // textarea)
  if (d && d.selection && d.selection.createRange) {
    t = d.selection.createRange().text;

  // Otherwise try HTML5 - note that getSelection returns
  // a string with extra properties. This may also get
  // text within input and textarea
  } else if (d.getSelection) {
    t = d.getSelection();
  }

  // If didn't get any text, see if event was inside
  // inupt@type=text or textarea and look for text
  if (t == '') {
    if (tagName == 'textarea' || 
       (tagName == 'input' && el.type == 'text')) {

     // Check selectionStart/End as otherwise if no text
     // selected, IE returns entire text of element
     if (typeof el.selectionStart == 'number' && 
         el.selectionStart != el.selectionEnd) {
        t = el.value.substring(el.selectionStart, el.selectionEnd)
     }
    }
  }
  return t;
}

Answer 3

我會使用 JQuery 來做同樣的事情，因為它是跨瀏覽器的，並且您編寫更抽象的 java 腳本，而不是您到目前為止編寫的本地瀏覽器特定的腳本。