问在JavaScript中复制<td>元素内容
EN

Stack Overflow用户

提问于 2020-08-13 11:51:24

回答 1查看 62关注 0票数 0

我正在尝试编写JS代码，它可以复制td的内容，同时显示某种通知，让用户知道某些内容已复制到剪贴板。我尝试了以下代码，复制到剪贴板工作正常，但通知从来没有工作。我该怎么办？

PHP和HTML：

echo "<td onClick='copy(this),selectThis(this)'> " . $row['email'] . "</td>";

JS：

<script type="text/javascript">
    function copy(that){
        var inp =document.createElement('input');
        document.body.appendChild(inp)
        inp.value =that.textContent
        inp.select();
        document.execCommand('copy',false);
        inp.remove();
    }
    function selectThis(element) {
        document.createElement("input")).style.backgroundColor = "red";
    }
</script>

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-13 23:09:40

'use strict';
function copy(that){
 // ...
 notify(that.textContent);
}

function notify(content) {
  let notification = document.createElement('span');
  notification.classList.add('notification');
  notification.textContent = `"${content}" copied`;
  document.body.prepend(notification);
  setTimeout(() => notification.remove(), 4000);
}

.notification {
  border: solid 1px green;
  padding: 5px;
  animation-name: fade;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
 }
 
@keyframes fade {
  from { opacity:0; }
  to { opacity:1; }
}

<p onclick="copy(this)" id="element" >Click here to copy this text (figuratively).</p>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63387886

复制

相似问题

问在JavaScript中复制<td>元素内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中复制<td>元素内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中复制<td>元素内容
EN