jQuery - 悬停时复制文本 <textarea>

Question

我可以复制 <textarea> 中的文本在 this example 。但在我将该代码简化为以下代码之后:

$('textarea').mouseout(function(){
  $('textarea').blur();
});

$('textarea').mouseover(function(){
  $(this).focus();
  $(this).select();
  document.execCommand('copy');
});

textarea {
    margin-left: 15px;
    margin-right: 15px;
    width: 200px;
    height: 17.5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
BLABLABLA<textarea>Hover me, I am special!</textarea>BLABLABLA<br/>
<input placeholder="Paste me here!"></input>

我可以选择 <textarea> 中的文本但不复制文本。我尝试过:

1. $(this)[0].execCommand('copy');

2. $(this).execCommand('copy');

3. this.execCommand('copy');

4. document.execCommand('copy');

请帮助我。谢谢。

Answer 1

嗯，浏览器实现中似乎有一些东西(使用 Blink 537.36 测试)根据调用类型以不同方式处理复制命令。如果我使用 click 事件，内容将被复制。但是，如果我使用 mouseover 事件尝试此操作，则不会复制内容。

var ta = document.getElementById('copy-test');

var copyHandler = function(event) {
    event.target.select();
    var status = document.execCommand('copy', false);
    console.log( status ); // Only for testing
};

ta.addEventListener('mouseover', copyHandler);

ta.addEventListener('click', copyHandler);

<textarea id="copy-test">Hello World!</textarea>