Меж-браузерная работа с выделениями.

Теперь вы знаете, как работать с выделениями в Navigator 4.0x (с помощью метода GetSelection()) и Internet Exporer (с помощью объекта TextRange), теперь самое время поговорить о ее меж-броузерном исполнении. Вообще говоря, Navigator 4.0x поддерживает метод document.getSelection(), в то время как Internet Explorer 4.0x поддерживает объект document.selection. По этому простейший способ определения объекта выглядит так:

if (document.getSelection) {
  // the Navigator 4.0x code
} else if (document.selection) {
  // the Internet Explorer 4.0x code
} else {
  // the alternative code
}

При попытке получит текущее выделение (это единственное, что вы можете сделать в Navigator 4.0x) вы должны создать объект TextRange (Internet Explorer 4.0x). Но не все версии Inernet Explorer 4.0x поддерживают объект TextRange. Например, Mac версия Internet Explorer 4.0x не поддерживает текстовые области, хотя он и поддерживает объект document.selection(). По этому мы будем использовать логический оператор AND, для проверки того, поддерживается ли метод document.selection.createRange(). Оператор AND необходим, потому что гарантирует, что браузер не будет проверять document.selection.createRange, если ее родительский объект (document.selection) не поддерживается. По этому, скрипт, который возвращает текущее выделение должен иметь следующую структуру:

if (document.getSelection) {
  // the Navigator 4.0x code
} else if (document.selection && document.selection.createRange) {
  // the Internet Explorer 4.0x code
} else {
  // the alternative code
}

Следующий пример отоброжает текущее выделение в поле ввода:

<FORM NAME="myForm">
<TEXTAREA NAME="myArea" COLS="40" ROWS="4"></TEXTAREA>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--

function display() {
  if (document.getSelection) {
    var str = document.getSelection();
  } else if (document.selection && document.selection.createRange) {
    var range = document.selection.createRange();
    var str = range.text;
  } else {
    var str = "Sorry, this is not possible with your browser.";
  }
  document.myForm.myArea.value = str;
}

if (window.Event)
  document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;

// -->
</SCRIPT>

Мы объяснили цель этого скрипта в предыдущем разделе. Его единственное отличие - это то, что он является меж-браузерной версией, которая работает в Win32 версиях Internet Explorer 4.0x, а также во всех версиях Navigator 4.0x. Просто выберите часть этого документа, и она появится в этом поле ввода:

Если у вас есть доступ к обоим браузерам, вы могли заметить, что в Internet Explorer 4.0x, в отличие от Navigator 4.0x, не влияет на размещение страницы. Например, он не вставляет пробелы, когда текст выровнен с помощью blockquote. Так как эта содержимео этой страницы отформатировано, мы будем использовать регулярные выражения, чтобы избавиться от лишних пробелов, как объяснено в начале статьи. Вот - законченный код:

<FORM NAME="myForm">
<TEXTAREA NAME="myArea" COLS="40" ROWS="4"></TEXTAREA>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--

function display() {
  if (document.getSelection) {
    var str = document.getSelection();
    if (window.RegExp) {
      var regstr = unescape("%20%20%20%20%20");
      var regexp = new RegExp(regstr, "g");
      str = str.replace(regexp, "");
    }
  } else if (document.selection && document.selection.createRange) {
    var range = document.selection.createRange();
    var str = range.text;
  } else {
    var str = "Sorry, this is not possible with your browser.";
  }
  document.myForm.myArea.value = str;
}

if (window.Event)
  document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;

// -->
</SCRIPT>

Другая вещь, на которую стоит обратить внимание, это то, что Internet Explorer не вставляет перенос строки и возврат каретки в том месте страницы, где текст переносится на новую строчку.

1.

Аноним

23 марта 2006, 19:42:32

Статьи по работе с выделениями оказались мне очень полезны.
Спасибо большое!
А то для исправления одного хтмл-редактора приходится иногда целый денёк убить.
Ещё раз спасибо!