Я пытаюсь следовать этому коду: https://www.w3schools.com/howto/howto_js_copy_clipboard .asp

HTML модальный:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">App Link</h4>
          </div>
          <div class="modal-body">
            <input id="appID" value="123"></input>
            <button type="button" class="btn btn-success" id="copyBtn">Copy</button>
            </div>                  
        </div>
      </div>
    </div>

Вот мой JS:

var copyBtn = document.getElementById('copyBtn');

copyBtn.onclick = function(){
    var myCode = document.getElementById('appID').value;
    var fullLink = document.createElement('input');
    document.body.appendChild(fullLink);
    fullLink.value = "http://fulllink/" + myCode;
    fullLink.select();
    document.execCommand("copy", false);
    fullLink.remove();
    alert("Copied the text: " + fullLink.value);
}

Код не будет работать, когда ввод и кнопка находятся внутри модального окна; код будет работать, если помещен в тело. Почему?

5
Eric Nguyen 26 Фев 2018 в 17:58

3 ответа

Лучший ответ

Вы получаете сообщение об ошибке, потому что .select является функцией, связанной с элементами ввода. В настоящее время вы пытаетесь вызвать select в строке fullLink. Нам нужно создать элемент ввода и дать ему свое значение. Что-то вроде этого:

var copyBtn = document.getElementById('copyBtn');
copyBtn.onclick = function(){
    var myCode = document.getElementById('appID').value;
    var fullLink = document.createElement('input');
    document.body.appendChild(fullLink);
    fullLink.value = "http://fulllink/" + myCode;
    fullLink.select();
    document.execCommand("copy", false);
    fullLink.remove();
    alert("Copied the text: " + fullLink.value);
}
<input id="appID" value="123"></input>
<button id="copyBtn">Copy</button>
9
Phillip Thomas 26 Фев 2018 в 15:10

Это происходит потому, что ваш var fullLink не DOM-узел, а простой текст. Функция select определена для узлов DOM.

1
Alexander 26 Фев 2018 в 15:06

Если вы удалите tabindex="-1", это сработает.

0
CKE 23 Окт 2019 в 11:54