Пока я работал над новым приложением, мне нужно было быстрое решение, позволяющее пользователю скопировать текущий URL-адрес в буфер обмена.

Мы хотели, чтобы пользователь знал, что он копирует, поэтому имело смысл показать элемент ввода только для чтения с кнопкой «копировать ссылку» справа. Я быстро узнал, что есть собственный способ добиться такого поведения, и хотел поделиться с вами этим небольшим фрагментом:

Обратите внимание на inputHTMLElement.setSelectionRange(0, inputHTMLElement.value.length) — мне потребовалось некоторое время, чтобы понять, что это необходимо для того, чтобы команда копирования работала должным образом в iOS 12.

Если вы хотите использовать React, вам нужно будет создать ссылку на элемент ввода HTML. Вот полный пример компонента ShareButton.tsx:

Дайте мне знать, если это полезно, и если у вас есть какие-либо отзывы!

Если вам интересно, для какого сервиса я создавал это, то это для аккуратного небольшого расширения для Chrome, которое позволяет вам делать скриншоты любого веб-сайта, оставлять на нем аннотации и делиться результатом с друзьями и коллегами. Посетите www.usebubbles.com, если это покажется вам полезным.