Недавно нам нужно дать HTML5 WebApp для реализации функции копирования на странице: пользователи могут выбрать текст и вскрывать меню «Скопирование системы» в длинном тексту, и пользователь может нажать, чтобы копировать для операции копирования, а затем вставить Это в AppStore Search для соответствующего приложения. Причина, по которой он не используется для непосредственного перехода к соответствующему приложению AppStore в форме ссылок, заключается в увеличении веса продвигаемого корпоративного приложения через поиск ключевых слов пользователя. Таким образом, эта функция копирования необходима для пользовательского опыта.
Попробуя некоторые практики, совместимость на платформе Android/iOS не очень хорошая. В браузере WeChat легко достичь долгосрочного текста, чтобы стимулировать системное меню. Но производительность других браузеров не является последовательной. Включая ввод фокусировки симуляции, выбор JavaScript, попробуйте активировать меню системы с помощью тега. Эти методы имеют совместимые дефекты.
1) Несмотря на то, что в браузере UC и Baidu используется тег с атрибутом HREF, давно нажмите. Некоторые телефоны Android, в некоторых телефонах Android, системный браузер и iPhone рассматриваются как чистые ссылки, появляется только ссылка копирования, не копируя текстовое меню. Более того, даже если бы только небольшое количество браузеров считалось возможным, это будет на шаг больше для управления пользователями, увеличивая сложность. Так что этот план не желателен.
2) С помощью методов выбора и диапазона необходимо учитывать совместимость различных браузеров.
Функция Select Telect (element) {var doct, document, text = docgetelementbyid (element), range, selection; Selection = WindowgetSelection (); } else {alert (none);}}К сожалению, все тексты не могут быть выбраны, нажав или долго нажимая на сафари для iPhone (поскольку он также поддерживает Window.getSelection, почему текст не может быть выбран по умолчанию после операции Safari Browser Addrange, пожалуйста, оставьте сообщение по причине. ) Следовательно, в этом методе есть дефекты. Активно выберите метод китайской текстовой области и прикрепите его позже.
3) Пользователи iPhone могут знать, что длинное нажатие на пустую область вокруг текста в определенном текстовом избирательном округе Safari автоматически выберет текст в избирательном округе (целевой текст должен быть размещен в независимом контейнере блока Div). Основываясь на этой функции, используйте маржу CSS для ее изменения. После тестирования, независимо от платформ Android и iOS, системный браузер, который поставляется с мобильными телефонами, совместим. Что касается мобильных продуктов от других производителей, таких как браузер UC и Baidu Browser, поскольку существуют различные механизмы, они могут использовать только функцию бесплатной репликации, предоставленную этими меню браузера.
Поэтому я объединил второй и третий путь, используя событие Taphold в JQUERY Mobile, чтобы имитировать копию системы мобильного телефона для работы Longtap. Давайте упомянут, что совместимые с тап -ошибками Таппольда не будут прикреплены к решению подробно.
Вот мое решение. Конкретный код заключается в следующем:
HTML -код:
<div class = para restement> <div class = tips tips-t> 1. Вы должны загрузить его в первый раз, прежде чем он вступит в силу <br/> 2. Не могу загрузить его с ранжирования </div> <div class = cparea> <div class = kwd id = kwd> <pran> мастер трех королевств оптимизации мобильного телефона Yanyi </span> </div> </div> <div class = cparea> <span class = kdes> </</div b> ★ </b> долго нажмите пунктированный кадр, копируйте ключевые слова </span> </div> <a href = https: // iTunesapplecom/cn/data-role = class = скачать> перейдите в AppStore, чтобы поиск и Скачать </a> </div>
Код JavaScript:
<Script type = text/javascript> $ (#kwd) bind (taphold, function () {// не поддерживает iPhone/itouch/iPad safari var doc = документ, text = docgetelementbyid (kwd), диапазон, выбор; DectodyCreatextrange) );Ключевой код CSS:
CPAREA {Text-Align: Center; 1875; #212121;ПРИМЕЧАНИЕ: Маржа Здесь: 2EM -это достижение длительной функции длительного нажатия браузера Safari. это 2ем. В конце концов, не только визуально согласуется с рисунком дизайна, но и достигает длительного меню системы стимуляции.
Наконец, добавьте полный способ поддержки Safari:
$ (#kwd) .bind (taphold, function () {var doc = documen, text = docgetelementbyid (kwd), range, selection; if (docbodecreatexrange) {// ie range = documentbotbreatextrange (); ();} Else if (WindowgetSelection) {// ff ch sf selection = windowgetselection (); ; Поддержка TextContent MakeLections (0, TextFirstChildTextContentLength, 0, TextFirstChild); }});Приведенное выше содержимое этой статьи.