Почему не document.execCommand вызывает заполнение буфера обмена?

Question

У меня есть следующий HTML:

<td class="pn"> 
    <span class="copyable">410-555-1234</span> 
    <span title="Click to copy" class="clipboard">&#x1f4cb;</span> 
    <form class="pn-copy-form"> 
    <input class="pn-copy" type="text" value="+14105551234" /> 
    </form> 
</td> 

Когда пользователь нажимает на значок буфера обмена, я хотел бы, чтобы заполнить содержимое системного буфера пользователя с «+14105551234». Однако я замечаю, что ничего не заполняется. Вот Javascript я использую, расположенный в нижней части той же странице:

var evHandler = function(clipboardElem) { 
    return function() { 
     var pnCopy = clipboardElem.parentNode.querySelector('.pn-copy'); 
     if (pnCopy === null) { 
     return; 
     } 
     pnCopy.select(); 
     try { 
     result = document.execCommand('copy'); 
     if (result === false) { 
      throw new Error("Could not copy value: " + pnCopy.value); 
     } 
     } catch (e) { 
     console.error(e); 
     alert("Couldn't copy text, sorry. Here it is: " + pnCopy.value); 
     } 
     console.log("Copied "+ pnCopy.value + " to the clipboard"); 
     pnCopy.blur(); 
    }; 
    } 

    var clipboards = document.querySelectorAll('.clipboard'); 
    for (var i = 0; i < clipboards.length; i++) { 
    var clipboard = clipboards[i]; 
    clipboard.addEventListener('click', evHandler(clipboard)); 
    } 

Я прячусь форму, так как я не хочу, чтобы она появилась на этой странице.

.pn-copy { 
    display: none; 
} 

Почему не заполняется буфер обмена? Не работает ли клик-копирование на локальном хосте или не работает в незашифрованном HTTP-протоколе?

Answer 1

Форма должна быть «видимой», хотя это определение свободно, и я думаю, что это примерно «не отображается: нет». Без этого на месте .select() не выбирает текст. У меня был успех со следующим CSS, который оставляет вход «видимым», но помещает 3000 пикселей с экрана.

/* the input has to be "visible", if you use display: none copy won't work. */ 
.pn-copy-form { 
    position: absolute; 
    height: 1px; 
    left: -3000px; 
}