Как поддерживать множественный выбор текста между браузерами? - PullRequest
Новая
       10

Как поддерживать множественный выбор текста между браузерами?

7 голосов
/ 23 марта 2009

Я создаю веб-инструмент для аннотаций, в котором конечные пользователи могут выбирать и комментировать раздел текста из HTML-документа. Программно говоря, получить доступ к выбранному тексту и соответствующему диапазону и работать с ним просто, используя "window.getSelection" и "getRangeAt".

Однако я сталкиваюсь с проблемой, когда пытаюсь собрать все это вместе в кросс-браузерном приложении. Все работает, как в Firefox, но в Safari я сразу заметил, что когда я нажимаю кнопку HTML (то есть кнопку «аннотация»), выделение текущего текста пользователя исчезает, как будто нажатие кнопки изменяет положение текстовой каретки. Мой код, который пытается получить доступ к window.getSelection, выполняется из скрипта в этой кнопке, который затем сообщает, что выбор не существует.

Я покопался и взглянул на то, как Google Docs, в частности их приложение для обработки текста, справляется с этим, поскольку по сути поведение и механизм выделения текста и нажатия «Жирный шрифт» или «Изменить шрифт» соответствуют моей функции аннотации. В Google Docs они загружают текст документа для редактирования в iframe. Поэкспериментировав с этим, я узнал, что Firefox из коробки поддерживает несколько диапазонов выбора на веб-странице, содержащей несколько фреймов или фреймов. Другими словами, я могу выбрать раздел текста на базовой странице и отдельный раздел текста в iframe без исчезновения первого выделения. Это решение Google Docs работает как для Firefox, так и для Safari (двух браузеров, которые меня интересуют). Но когда я создал простую страницу примера для тестирования этого решения, в Safari это не сработало. Как только я нажимаю кнопку или выбираю текст на корневой странице (вне рамки iframe), текущий выбранный текст iframe исчезает.

Кто-нибудь знает, что мне здесь не хватает, чтобы заставить это работать? Или есть предложение по другому способу заставить это работать?

Ответы [ 3 ]

3 голосов
/ 31 марта 2009

Подключите ваш обработчик событий к событию mousedown кнопки (вместо события click или mouseup). Это позволит вам захватить текущий выбор, прежде чем он будет очищен.

Пользовательский опыт можно поддерживать, сохраняя выбор в переменной и используя его только в том случае, если ваша кнопка получает событие нажатия. Как это: 

<button onmousedown="sel = window.getSelection()" onclick="alert(sel)">What's the selection?</button>
3 голосов
/ 03 апреля 2009

Мне кажется, что самым простым решением было бы подключить обработчик событий к выделенному тексту и сохранить текущее выделение в буфер, чтобы вам не пришлось беспокоиться о времени.

Откройте Firebug на этой странице и запустите следующий фрагмент: 

var buffer = '';
$('p').mouseup(function() {
    buffer = window.getSelection();
});

Затем вы можете выбрать все, что хотите, и посмотреть последний выделенный текст, выполнив: 

console.log(buffer);

Вуаля, щелкнуть / отменить выбор проблемы с синхронизацией:)

1 голос
/ 23 марта 2009

Я узнал, что Firefox из коробки поддерживает несколько диапазонов выбора на веб-странице, содержащей несколько кадров

Черт, Firefox даже поддерживает множественный выбор на одном кадре! (Попробуйте перетащить щелчок мышью, а затем удерживать клавишу Ctrl-щелчок мышью на отдельном фрагменте текста.)

в Safari Я сразу заметил, что когда я нажимаю кнопку HTML, выделение текста текущего пользователя исчезает, как будто нажатие на кнопку изменяет положение курсора

У меня работает, в Safari 3.2.1 на Windows. Нажатие или оставляет выделение там, где оно есть, хотя оно будет серым, если оно находится в другом кадре. ‘Window.getSelection ()’ продолжает работать как обычно.

Можете ли вы опубликовать тестовый пример, и какая версия Safari ведет себя неправильно?

...