day1:js实现复制和粘贴的功能

121 阅读1分钟

背景:在实际需求中,需要使用js进行复制和粘贴,从而提高用户的体验性

技术实现:使用navigator相关API代替传统的复制粘贴功能,对于最新的chrome兼容性会更好

直接上代码:

<div>
  <input class="inp_copy" value="这是要复制的内容" />
  <button onclick="copy($1('.inp_copy').value)">复制</button>
</div>
<div>
  <input class="inp_paste" />
  <button onclick="paste()">粘贴</button>
</div>
<script>
  function copy(text = '') {
    navigator.clipboard.writeText(text).then(() => {
      alert('复制成功')
    }, () => {
      alert('复制失败')
    })
  }
  function paste() {
    navigator.clipboard.readText().then((data) => {
      $1('.inp_paste').value = data;
      alert('粘贴成功')
    }, () => {
      alert('粘贴失败')
    })
  }
  function $1(ele) {
    return document.querySelector(ele);
  }
</script>