Не уверен, что заголовок выбран правильно...
Я пытаюсь смоделировать выделение текста в HTML/JS/CSS, чтобы избавиться от пузырька действия на мобильное устройство при действительном выборе текстов.
Чтобы быть более конкретным, я пытаюсь избежать этого:
Визуализация:
То, как я его построил, и оно может измениться, потому что это не имеет значения, заключается в том, что выделенный текст заключен в span.selection
и внутри этого тега есть также две каретки, используемые в качестве обработчиков:
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit.
В идеале было бы интересно использовать перетаскивание для выбора большего или меньшего количества текстов, но я считаю, что это было бы чертовски сложно сделать, и в этом случае, возможно, используя щелчок по курсору, чтобы выбрать либо предыдущий, либо следующее слово и обернуть его внутри .selection
было бы не так уж плохо.
Вот jsfiddle: http://jsfiddle.net/m6Qx4/
Окружающие тексты также могут содержать теги HTML, такие как: ,
,
и
могут присутствовать, что усложняет синтаксический анализ./
Есть идеи, как это можно сделать?
Обновление статуса:
Мне действительно удалось заставить его работать с .click();
прослушивателем событий, используя мои пользовательские методы jQuery.
Со временем я заменю события кликов пользовательским интерфейсом jQuery, который можно перетаскивать, чтобы выбирать окружающие слова, если это можно использовать на мобильных устройствах.
Моя текущая ошибка заключается в изменении положения красных курсоров. Я попытался уничтожить их и добавить/добавить их обратно, и это все еще не работает. Это может быть ошибка в Firefox, которая не может правильно перезагрузить DOM после изменений, внесенных в текстовые узлы?
Ссылка:jsFiddle
Чтобы проверить рабочее состояние jsFiddle.netиз-за недавних сбоев, посетите ихтвиты.