romich
@romich
Frontend разработчик

Как решить проблему execComand('copy') на IOS?

Суть проблемы: при нажатии на кнопку на сайте должно происходить копирование какой-либо информации, которая располагается где-либо на сайте, в моем случае в `data-attr`. Копирование везде, кроме `IOS` можно легко сделать при помощи `execCommand('copy')`. То есть мы создаем какой-то скрытый `input` или `textarea`, в ней выполняем `select()`, а дальше `execCommand('copy')`. C IOS все неочевидно. Stackoverflow предлагает решение через userAgent

const iosFlag = !!navigator.userAgent.match(/ipad|ipod|iphone/i);

const copyClipBoard() {
    if (iosFlag) {
      const oldContentEditable = this.textArea.contentEditable;
      const oldReadOnly = this.textArea.readOnly;
      const range = document.createRange();

      this.textArea.contenteditable = true;
      this.textArea.readonly = false;
      range.selectNodeContents(this.textArea);

      const s = window.getSelection();

      s.removeAllRanges();
      s.addRange(range);

      this.textArea.setSelectionRange(0, 999999);
      this.textArea.contentEditable = oldContentEditable;
      this.textArea.readOnly = oldReadOnly;

      document.execCommand('copy');
    }
  }


Решение рабочее, но проблема состоит в том, что на IOS происходит скролл страницы до того места, где создан инпут. ТО есть если я делаю `document.body.appendChild(myTetxtArea)`, то он скроллит прямо к этому элементу. Можно решить проблему создавая `textarea` прям под кнопкой копирования. Тогда скролл минимален (но он есть), при этом на доли секунды появляется клавиатура девайса и пропадает.

И, собственно, я не знаю, как решить проблему появления клавиатуры и микроскролла? Есть ли какие-то еще решения, чтобы копировать по кнопке, при этом на IOS было также визуально, как и везде?
  • Вопрос задан
  • 1358 просмотров
Пригласить эксперта
Ответы на вопрос 1
jasonOk
@jasonOk
Легче болтать, чем код писать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы