В Netscape Navigator 4.0x и Internet Explorer 4.0x возможно получить содержимое выделенной на странице области. В Internet Explorer 4.0x вы можете выделить любой элемент, в том числе, текст и изображения. В отличие от него в Navigator 4.0x поддерживает только выделение текста.
В этой статье мы рассмотрим различия между выделениями в Navigator 4.0x и Internet Explorer 4.0x. Navigator 4.0x, в отличие от Internet Explorer 4.0x, меньше полагается на операционную систему клиента, потому что, в некоторых системах стандартные возможности не реализованы.
Navigator 4.0x поддерживает единственный метод, который возвращает текст текущего выделения в виде строки. Internet Explorer 4.0x работает с выделением с помощью текстовых областей.
Как Navigator 4.0x и Internet Explorer 4.0x работают с выделениями.
В Navigator 4.0x возможно выделить только текст. Например, когда вы проведете курсором мышью над изображением, он не подсвечивается. Броузер просто выделяет текст до и после изображения. Высота выделения зависит от размера текста. Не возможно определить какой тип текста выделен.
Internet Explorer 4.0x во многом отличается от Navigator 4.0x. В Internet Explorer 4.0x возможно выделить практически все элементы страницы. Например, вы можете выделить текст, изображения и кнопки. Однако, некоторые элементы, такие как выпадающие меню (SELECT) не могут быть выделены.
В отличие от большинства остальных программ, выделение в Navigator 4.0x остается активным (подсвеченным), даже если окно теряет фокус. Например, если вы с помощью мыши выделите область документа, а потом нажмете на кнопку на странице, Navigator 4.0x не снимет выделение с текста. В отличие от Navigator 4.0x, выделение в Internet Explorer 4.0x снимается, когда выделенный элемент теряет фокус. Например, когда вы нажмете кнопку на странице, браузер снимет текущее выделение.
В обоих броузерах "четвертого" поколения, выделение снимется, если после выделения части документа вы кликните на ссылку. Поэтому вы не можете написать скрипт, который попросит пользователя кликнуть на ссылку, с помощью которой будет запущен скрипт отображающий текущее выделение. Мы рассмотрим новые события Navigator 4.0x и Internet Explorer 4.0x для отображения выделенной пользователем области, когда он или она отпускаю кнопку мыши. Другими словами, мы будем обрабатывать выделение, когда произойдет событие mouseup.
Как использовать события связаные с выделениями.
Несмотря на то, что Navigator 4.0x не может возвращать выделений текст в полях text и textarea, он может реагировать на них. Navigator 4.0x поддерживает событие onselect, которое запускает JavaScript код, когда пользователь выделяет часть текста в поле формы. Это событие может использоваться для других элементов страницы.
<FORM>
<INPUT TYPE="text" NAME="data" SIZE="30"
onSelect="... statements here ...">
</FORM>
Событие onselect также поддерживается браузером Internet Explorer 4.0x, как событие для полей text и textarea. Это событие не пузырьковое, как многие другие в Internet Explorer 4.0x. Непузырьковые события могут быть принято только у объекта произведшего событие, поэтому вы не можете принимать событие объекта select на уровне объекта document.
Internet Explorer 4.0x также поддерживает событие onselectstart, которое может ассоциироваться с любым элементом страницы. Это событие происходит, когда курсор мыши начинает выделение одного или нескольких элементов. Событие генерируется элементом, с которого начинается выделение. Так как Navigator 4.0x не поддерживает это событие, то использовать его бесполезно. С помощью скрипта возможно имитировать это действие в Netscape 4.0x. Более того, в Navigator 4.0x поддерживается только выделение текста, поэтому не имеет смысла определять, как элемент сгенерировал событие. Лучший способ прореагировать на выделение - это событие onmouseup, которое срабатывает, когда пользователь отпускает кнопку мыши. С помощью назначения скрипта на это событие возможно проверить, было ли сделано выделение, и среагировать соответствующим образом.
Событие onmouseup поддерживается обоими браузерами "четвертого" поколения, поэтому наиболее полезно. В Internet Explorer 4.0x вы можете использовать преимущество события onmouseup для того, чтобы найти последний элемент выделения. Свойство srcElement объекта event ссылается на этот элемент. Простейший пример обработки события, который автоматически определяет выделение, приведен ниже:
function detect(e) {
// check if a selection exists
}
if (window.Event)
document.captureEvents(Event.MOUSEUP);
document.onmouseup = detect;
Как получить выделение в Navigator 4.0x.
Navigator 4.0x поддерживает метод getSelection() объекта document. Этот метод возвращает строку, содержащую текст текущего выделения. Обычно вызывается так:
document.getSelection()
Следующий пример показывает, как работает метод getSelection()
FORM NAME="myForm">
<TEXTAREA NAME="myArea" COLS="40" ROWS="4"></TEXTAREA>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function display() {
if (!document.getSelection)
return;
var str = document.getSelection();
document.myForm.myArea.value = str;
}
if (window.Event)
document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;
// -->
</SCRIPT>
Скрипт отображает текущее выделение в поле ввода. В начале, он указывает браузеру захватывать все события onmouseup. Этот способ работает только в Navigator 4.0x, поэтому, перед вызовом выражения, простое определение объекта удостоверяется в наличии браузера Navigator 4.0x,.
Функция срабатывающая на событие сначала присваивает выделенный текст переменной под названием str. И когда свойству value элемента формы присваивается переменная, выделение отображается в поле ввода. Теперь выделите мышью некоторый текст. И если вы используете Navigator 4.0x, выделение незамедлительно отобразится в поле ввода.
Выражение:
if (!document.getSelection)
return;
прерывает выполнение функции, если у пользователя запущен браузер, который не поддерживает метод getSelection() объекта document.
Обратите внимание как формат документа повлиял на значение возвращенную методом getSelection(). Например, эта страница использует пару <BLOCKQUOTE>... </BLOCKQUOTE> для отступа содержимого, что облегчает чтение. Если вы выбираете некоторые строки текста, вторую (или третью, четвертую, пятую и т.д.), то текст строки отступает, из-за использования <BLOCKQUOTE>. В этом случае, новая строка состоит из возврата каретки (\r), перевода строки (\n), и пяти пробелов. Вы можете определить какие символы переносят строку отобразив значение строки с помощью функции escape().
alert(escape(str));
Функция escape() получает в качестве аргумента строку и возвращает эту же строку с замененными нетекстовыми символами на их эквивалент в шестнадцатеричной системе исчисления.
С помощью регулярных выражений вы можете легко отделаться от ненужных символов. В нашем примере, комбинация \r\n платформо-зависимая, поэтому мы просто удалим пять пробелов, которые следуют после нее. Вот альтернативный скрипт:
<SCRIPT LANGUAGE="JavaScript">
<!--
function display() {
if (!document.getSelection)
return;
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, "");
}
document.myForm.myArea.value = str;
}
if (window.Event)
document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;
// -->
</SCRIPT>
Сначала мы определили какая серия символов вызвала проблему, отображая значение возвращенное функцией escape(), как показано выше. Мы немедленно обратили внимание на последовательность из пяти нетекстовых символов: %20%20%20%20%20
Поэтому, функция unescape() преобразовывает эти символы и присваивает это значение переменной. Регулярное выражение определено как объект RegExp. Обратите внимание на аргумент "g". Он определяет то, что строка должна снова сравниваться с регулярным выражением многократно, если образец найден более одного раза. Результирующая строка отображается после замены всех последовательностей пяти пробелов пустой строкой.
Как использовать объект selection в Internet Explorer 4.0x.
Internet Explorer 4.0x использует объект document.selection который включает в себя свойства и некоторые методы для управления выделениями. Объект selection предоставляет информацию о тексте и элементах, которые пользователь выделил с помощью мыши. Это может быть очень полезно, если вы хотите произвести некоторые действия, основанные на том, что выделил пользователь.
Свойство type объекта selection определяет тип выделения. Это строка, доступная только для чтения, которая может принимать одно из следующих значений:
Значение Описание
None Нет выделения или точки вставки.
Text Выделен только текст.
Control Выделены структуры управления.
Значение по умолчанию, естественно, "None" - когда нет выделения. Поэтому, сравнение значения document.selection.type с "None" в Internet Explorer 4.0x, равносильно сравнению значения возвращенного методом document.getSelection() с "" в Navigator 4.0x
Объект selection имеет следующие методы:
Метод Описание
clear() Очищает содержимое текущего выделения.
empty() Снимает текущее выделение.
createRange() Создает объект TextRange для текущего выделения.
Рассмотрим следующее выражение:
document.onmouseup = document.selection.clear;
Если вы вставить это выражение в скрипт, то браузер будет удалять все выделения. Другими словами, когда пользователь выделяет часть документа, браузер немедленно удаляет его. Если выделение содержит не текстовые элементы, то они будут удалены тоже. Соответственно, страница с новым содержимым будет перерисована. Обратите внимание, что метод clear() описан как clear (не clear()), потому что обработчику события должна быть присвоена ссылка на функцию (а не вызов функции). Имейте ввиду, что этот скрипт не работает в Navigator 4.0x, так как пользуется преимуществом объекта selection.
Метод empty() просто снимает текущее выделение. Замечательно, но бесполезно использовать этот метод, для создания страницы, с невозможностью выделения.
document.onmouseup = document.selection.empty;
Это выражение указывает браузеру снимать любое выделение, существующее на странице. Другими словами, оно снимает подсветку с выделения. Имейте ввиду, что метод empty() помимо всего прокручивает рабочее окно в самый верх страницы. Поэтому, приведенное выражение скроллирует рабочее окно к верху страницы, всегда, когда вы отпускаете кнопку мыши.
Метод createRange() очень просто. Он возвращает объект TextRange для текущего выделения. Вот пример:
var range = document.selection.createRange();
Работа с объектом, и его данными - это уже другая история. Мы рассмотрим это в следующем разделе этой статьи. Просто продолжите чтение, чтобы узнать, как использовать новый объект, и как написать функцию эквивалентную методу document.getSelection() в Navigator 4.0x.
Как создать объект TextRange в Internet Explorer 4.0x.
Объект TextRange представляет текст внутри HTML элемента. Самый простой способ понять этот объект, доступный только на платформах Win32 (Internet Explorer 4.0x), это поработать с примером. Посмотрите на следующий HTML код:
<HTML>
<HEAD>
<TITLE>Sample Page</TITLE>
</HEAD>
<BODY>
<H1>This is a sample page.</H1>
<P>This is some sample text.</P>
</BODY>
</HTML>
Текст HTML документа известен как поток. Поток является в основном целым кодом, в котором все теги убраны. Другими словами, элементы HTML не влияют на поток. Например, поток в для предыдущего примера:
This is a sample page. This is some sample text.
Объект TextRange отображает поток для заданной части документа. С помощью этого объекта вы можете манипулировать потоком, для изменения текста отображающегося на странице. Вы можете использовать этот объект для получения и модификации текста в элементе, для определения местонахождения указанного текста на странице, и выполнять команды, которые влияют на отображение текста. Объект TextRange обычно создается с помощью метода TextRange() желаемого элемента, что продемонстрировано в следующем примере.
var range = document.body.createTextRange();
Этот метод может быть применен только к элементам BODY, BUTTON, TEXTAREA или INPUT, который имеет текстовый тип (type="text").
Другой способ создать объект TextRange - это следующим способом использование метод createRange() объекта document.selection:
var range = document.selection.createRange();
После выделения текстовой области, вы можете использовать разные методы, манипуляции объектом TextRange. Мы обсудим эти методы в следующем разделе этой статьи.
Как использовать свойства и методы объекта TextRange.
В этом разделе статьи мы рассмотрим свойства и методы объекта TextRange. Они предоставляют возможность изменения текста и элементов страницы. Для демонстраций мы будем использовать пример из предыдущего раздела. Напомним его:
<HTML>
<HEAD>
<TITLE>Sample Page</TITLE>
</HEAD>
<BODY>
<H1>This is a sample page.</H1>
<P>This is some sample text.</P>
</BODY>
</HTML>
Мы будем ссылаться на объект TextRange, отображающий содержимое документа - который будет возвращен следующим методом.
var range = document.body.createTextRange
Вот сокращенный список свойств объекта TextRange
Свойство Описание
htmlText Возвращает HTML фрагмент для выделенной текстовой области.
Свойство доступно только для чтения.
<H1>This is a sample page.</H1>
<P>This is some sample text.</P>
text Задает или возвращает текст содержащийся в диапазоне (range). Это свойства доступно как для чтения, так и для записи, это означает, что вы можете изменять текущее значение, также как получать его.
boundingWidth Возвращает ширину прямоугольника, который ограничивает текстовую область.
305
boundingHeight Возвращает высоту прямоугольника, который ограничивает текстовую область
74
boundingLeft Возвращает левую координату прямоугольника, который ограничивает текстовую область.
12
boundingTop Возвращает верхнюю координату прямоугольника, который ограничивает текстовую область.
17
offsetLeft Возвращает левую координату прямоугольника, который ограничивает текстовую область.
12
Это свойство - не тоже самое, что и boundingLeft. Например, если вы поместите участок кода в следующее определение:
<DIV STYLE="position: absolute; left: 200">...</DIV>
то свойство будет равно 212.
offsetTop Возвращает верхнюю координату прямоугольника, который ограничивает текстовую область.
17
Это свойство - не тоже самое, что и boundingTop. Например, если вы поместите участок кода в следующее определение:
<DIV STYLE="position: absolute; top: 200">...</DIV>
то свойство будет равно 217.
Помимо того, объект TextRange имеет много методов. Вот - список наиболее полезных из них:
Метод Описание
collapse([start]) Перемещает точки вставки к началу (по умолчанию) или концу текущей текстовой области (если аргумент задан как false)
expand(unit) Расширяет область таким образом, чтобы частичные элементы стали содержаться целиком. Метод возвращает true, если расширение прошло успешно, и false иначе. Unit может принимать одно из следующих строковых значений.
"character"
Расширяет символ.
"word"
Расширяет слово. Слово - это группа символов, ограниченных пробелом или разделительным символом.
"sentence"
Расширяет предложение. Предложение - это совокупность слов, ограниченных символом пунктуации, таким как точка.
"textedit"
Расширяет до целого объекта. Другими словами, область до ее оригинальных размеров.
Этот пример скрипта создает объект TextRange для текущего выделения, и гарантирует то, что любое, частично выделенное слово будет целиком помещено в объект.
var range = document.selection.createRange();
range.expand("word");
duplicate() Возвращает копию родительской текстовой области (метод которой вызывается)
parentElement() Возвращает родительский элемент для текстовой области. Родительский элемент - это минимальный элемент, заключающий в себя текстовую
область.
inRange(otherRange) Возвращает логическое значение, указывающее что хотя бы одна область (аргумент) содержится в другой (объект)
isEqual(otherRange) Возвращает логическое значение, указывающее что хотя бы одна область (аргумент) равна другой (объект)
scrollIntoView ([start]) Заставляет объект прокручиваться к видимой части окна, выравнивая по его верхней или нижней части. Если start содержит значение false, то нижняя часть объекта будет видна в нижней части окна.
Иначе, по умолчанию, объект прокрутится к верхней части окна.
setEndPoint (type, range) Согласовывает конечную точку (endpoint) одной области с конечной точкой (endpoint) другой. Строковой аргумент type задает, какая конечная точка (endpoint) будет перемещена, и какая конечная точка родительской области должна ее заменить.
Она поддерживает любой из следующих значений: "StartToEnd", "StartToStart", "EndToStart", или "EndToEnd". Второй аргумент, range - область их которой берется исходная конечная точка (endpoint).
compareEndPoints (type, range) Определяет, есть ли у родительской области (метод которой вызывается) и у области заданной в качестве аргумента (range) общие конечный точки (endpoint). Этот метод возвращает -1 (если меньше), 0 (если равны), 1 если больше. Аргумент type должен быть одним из: StartToEnd", "StartToStart",
"EndToStart", или "EndToEnd". Как вы видите, он описывает сравнение конечных точек (endpoint). Обратите внимание на то, что термин "конечная точка" (endpoint) не обязательно указывает на последнюю позицию в текстовой области. Это может быть либо первая, либо последняя, в зависимости от того, какое
значение имеет аргумент type.
select() Делает выделение на странице, эквивалентное текстовой области
В предшествующей таблице приведен список самых важных основных методов объекта TextRange. А в следующей таблице приведен список методов перемещения. После выделения текстовой области вы можете перемещать ее стартовую и конечную точку, с помощью этих методов. Заметьте, что они не перемещают текст на странице. Они просто перемещают границы диапазона, тем самым влияя на выделенную текстовую область.
Вот перечисление этих методов:
Метод Описание
move (unit [, count]) Изменяет стартовую или конечную точку текстовой области, для
для перекрытия некоторого текста. Это метод перемещает текстовую
область, не сам текст. Следующий аргумент может содержать одну
из следующих строк:
"character"
Перемещает один или более символов.
"word"
Перемещает одно или более слов. Слово - это группа символов,
ограниченных пробелом или разделительным символом.
"sentence"
Перемещает одно или более предложений. предложение - это
совокупность слов, ограниченных символом пунктуации,
таким как точка.
"textedit"
Перемещает к началу и конку оригинальной текстовой
области.
Второй аргумент, count - задает количество элементов для
перемещения (положительное, или отрицательное). По умолчанию
это 1. Метод возвращает реальное число перемещенных элементов.
moveStart (unit [, count]) Тоже самое, что и move(), только перемещает только стартовую
точку. Он изменяет диапазон области перемещая ее стартовую
точку.
moveEnd (unit [, count]) Тоже самое, что и move(), только перемещает только конечную
точку. Он изменяет диапазон области перемещая ее конечную точку.
pasteHTML (htmlText) Вставляет указанный HTML текст, в данную область. Текст целиком
заменяет предыдущий текст и HTML элементы, находящиеся в
области. Метод не может быть использован, пока документ
загружается. Кроме того, обратите внимание на то, чтобы
вставляемый текст и HTML элементы были пригодны для заданной
области. Например, попытка вставить ячейку таблицы в текстовую
область, не содержащей таблицы, может заставить метод вставить
элемент TABLE.
Помните, что текстовые области не поддерживаются в Макинтошовских версиях Inernet Explorer 4.0x. Эти методы и свойства актуальны только в Win32 версиях Internet Explorer 4.0x. На этой странице рассмотрены только основы текстовых областей, так как статья о выделениях, а не о текстовых областях. В следующем разделе этой статьи мы рассмотрим меж-браузерную работы с выделениями.
Как получить текущее выделение в Navigator 4.0x и Internet Explorer 4.0x.
Теперь вы знаете, как работать с выделениями в 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 не вставляет перенос строки и возврат каретки в том месте страницы, где текст переносится на новую строчку. С реальной скидкой насосы sfa по низким ценам