Копирование и вставка являются обязательными в любом современном веб-приложении, где пользователь должен предоставлять или экспортировать данные. Вот как использовать API буфера обмена с помощью однострочников, чтобы легко копировать, вырезать и вставлять.
Любое современное веб-приложение должно иметь возможность эффективно копировать и вставлять строки в буфер обмена и из него. Возьмем, к примеру, мое приложение, которое расшифровывает устные инструкции пользователя в электронное письмо, готовое для копирования и вставки в почтовое приложение:
Конечно, пользователь может вручную выделить весь текст электронного письма, созданного приложением, а затем скопировать текст с помощью Ctrl+C или щелкнув/коснувшись правой кнопкой мыши и выбрав «Копировать». Но это медленно и неэффективно, и даже чревато ошибками, особенно если текст длинный и тем более на смартфонах, где все отображается маленьким. В моем веб-приложении для написания электронной почты кнопка «копировать» решает все проблемы.
То же самое для вставки текста. Например, у меня есть приложение на основе GPT, которое анализирует большие фрагменты текста, которые пользователь может загрузить в текстовое поле, просто нажав кнопку «Вставить».
Теперь, как выполнить команды «копировать» и «вставить» программно в JavaScript без каких-либо библиотек? Вы найдете это здесь, используя простой API буфера обмена.
остроты
Вот строчка для копирования:
navigator.clipboard.writeText(‘Text or variable to copy to clipboard’);
А вот строчка для вставки:
navigator.clipboard.readText().then(text => (do something with text));
Например:
navigator.clipboard.readText().then(text => console.log(text));
Как насчет, скажем, вырезать весь текст из текстового поля? Ну, вы просто запускаете код для копирования, а затем очищаете содержимое текстового поля!
Некоторые важные примечания
Во всех этих примерах используется API буфера обмена, который представляет собой современный способ доступа к буферу обмена в браузерах, поддерживаемый всеми основными браузерами в их современных версиях.
Обратите внимание, что API работает асинхронно, что не требует особой осторожности, кроме как при вставке: как вы видели в примере, вам нужно разрешить обещание, поэтому предложение then.
Некоторые примечания об API и однострочниках:
- Ядро API (navigator.clipboard) работает только через HTTPS и только тогда, когда вызывающая его страница является активной вкладкой браузера.
- Когда данная страница впервые вызывает API, требуется, чтобы пользователь предоставил разрешение.
Наконец, настоятельно рекомендуемая страница для более глубокого изучения API буфера обмена:
Для более крутого JavaScript
www.lucianoabriata.com Пишу и снимаю обо всем, что лежит в сфере моих широких интересов: природа, наука, технологии, программирование и т. д. Стать участником Medium , чтобы получить доступ ко всем его историям (партнерские ссылки платформы, за которые я получаю небольшой доход бесплатно для вас) и подписаться, чтобы получать мои новые истории по электронной почте. Чтобы проконсультироваться по поводу небольших вакансий, посетите мою страницу услуг здесь. Вы можете связаться со мной здесь.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
