HTML5 реализует функцию мобильного копирования

Впервые я столкнулся с этим требованием через Baidu, но обнаружил, что они в основном реализованы с использованием js, а совместимость была очень плохой.

Однако в процессе поиска и попыток я обнаружил, что это можно полностью реализовать с помощью только CSS-кода. Просто добавьте следующие строки кода в теги, необходимые для копирования контента.

 -webkit-touch-callout: все;-webkit-user-select: все;-moz-user-select: все;-ms-user-select: все;user-select: all;

Фактически это означает, что работа пользователя с контентом не ограничена, а системное меню по умолчанию не отключено. Длительное нажатие отобразит встроенную функцию копирования системы.

clipboard.js — очень мощный плагин для вставки и копирования, но при использовании на мобильном терминале могут возникнуть проблемы совместимости. Вот решение, которое я часто использую.

HTML

 <input id=foo1 value=http://www.shellad.com/_2SP__22 (содержимое для копирования) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>Copy< /button></div>

js

 $(function () { var clipboard = new Clipboard('.btn'); // Грациозный переход на более раннюю версию: номер версии Safari >= 10, сообщает, что копирование выполнено успешно; в противном случае предлагается вручную выбрать копию после выбор текста clipboard.on('success', function(e) { alert('Копировать успешно!') console.log($(this)) e.clearSelection(); }); clipboard.on('error', функция(е) { alert('Пожалуйста, выберите копию для копирования!') });

Обратите внимание, что я использую элемент управления вводом вместо div или span при сохранении копируемого содержимого. Потому что во время тестирования только ввод имеет лучшую совместимость, не вызывает проблем и может гарантировать нормальную репликацию. В то же время плагин не поддерживает версию Safari <10, поэтому имейте это в виду.

Выше представлена ​​реализация функции мобильного копирования в формате HTML5, представленная редактором. Надеюсь, она будет вам полезна. Если у вас возникнут вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!