Событие выделения текста с устройства с touchscreenом

Question

[Денис Байдаров]

Возникла проблема. Есть сайт. Необходимо, чтобы если человек с мобильника или планшета выделяет текст на сайте, то срабатывало событие и происходили какие-то действия.
В интернете так решения и не нашел.
Есть событие ontouchend но оно не срабатывает при выделении текста.
Хотелось бы пример кода или хотя бы помощь куда копать в таком случае.

Answer 1

[Илья Юсупов]

Как насчёт события «selectionchange»?

document.addEventListener ('selectionchange', function (){
    // getSelection().toString();
}, false);

Comments

[Денис Байдаров]

Видел, пробовал, не работает. Более того, на компьютере вообще беспричинно вызывается событие когда надо и не надо.

[Илья Юсупов]

Возможно, стоит добавить, что работать будет лишь на WebKit-браузерах — с другой стороны, таких на мобильных платформах сейчас большинство.

У меня всё отлично работает как на десктопе (в браузере Chrome), как и с планшета.

Более того, на компьютере вообще беспричинно вызывается событие когда надо и не надо.

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

[Денис Байдаров]

Насчет компьютера согласен. Я тестировал вставляя alert в код функции. Собственно, когда выделяешь с телефона, то ничего не происходит. Точнее, если событие просматривает всю страницу, то вызывается оно несколько раз при загрузке страницы, а потом реагирует на каждый клик. Может что-то не правильно делаю?

[Илья Юсупов]

Когда я только начинал тестировать код на компьютере — также с alert'ом — получилось довольно забавно: я начинал выделять текст, и сразу же показывался alert, причём пустой — выделить-то я ещё ничего не успел. Ну а сам процесс выделения, разумеется, мгновенно прерывался.

А насчёт ненужных срабатываний я бы посоветовал где-нибудь в сторонке хранить текст, который был выделен при предыдущем «selectionchange» и выполнять нужные действия лишь если этот текст был изменён. Как-то так.

Кстати, если нужно отлавливать именно конец выделения, можно просто засекать время после очередного события и, если в течение, например, секунды, событие не сработало снова, считать, что выделение завершено. Учитывая, что в Android'е рамки выделенного текста всегда можно сдвинуть (iOS'ью не пользовался, так что, увы, не скажу), сама задача становится несколько туманной, но, на мой взгляд, такое решение вполне подойдёт.

[Денис Байдаров]

Спасибо за помощь! Ваш код действительно рабочий, однако такой вопрос. На своем телефоне под андроидом я так и не смог его запустить. На Lumia под виндой все работает. Собственно вопрос — на телефоне у меня кастомная прошивка, может ли это быть причиной? Или все-же данный способ ориентирован на планшеты?

[Илья Юсупов]

Даже не знаю, он ориентирован на WebKit-браузеры, так что, если у вас не старая Opera Mobile или не Firefox, должно работать. Может, просто браузер старый (не знаю, когда конкретно появилось это событие, но если недавно… на Android'е-то WebKit никто не обновляет).

Какой именно у вас браузер и какая версия Android'а?

[Денис Байдаров]

Прошивка CyagenMod, Android 4.0.4. Браузер, иконка Chrome, а по факту хз, вроде оно самое. Сам телефон Galaxy ACE.

[Илья Юсупов]

Увы, не знаю, в чём дело. У меня на планшете работает как во встроенном браузере, так и в Chrome (тоже CyanogenMod, Android 4.2).

[Денис Байдаров]

Спасибо, буду искать косяк у себя =)