master

分支 (1)

标签 (18)

管理

管理

master

1.10.1

1.10.0

1.8.0

1.9.0

1.7.2

1.7.1

1.7.0

1.5.0

1.6.0

1.4.0

1.3.0

1.2.0

1.1.1

1.0.3

1.1.0

1.0.2

1.0.1

1.0.0

xe-clipboard
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
    <title>剪贴板测试页面</title>
    <script src="https://cdn.jsdelivr.net/npm/xe-clipboard" async></script>
    <style type="text/css">
      .copy-status {
        height: 60px;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
      }
      .copy-status>span {
        display: none;
      }
      .copy-status.success {
        color: green;
      }
      .copy-status.success>.success {
        display: block;
      }
      .copy-status.error {
        color: red;
      }
      .copy-status.error>.error {
        display: block;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div>
      <div class="copy-status">
        <span class="success">Copy success.</span>
        <span class="error">The browser is not supported.</span>
      </div>

      <button class="btn1">复制到内容111</button>

      <input type="text" value="复制到内容222">
      <button class="btn2">复制</button>

      <input type="text" value="剪贴内容333">
      <button class="btn3">剪贴</button>
    </div>
    <script>
    (function () {
      var showtimeout
      function copyEvent (text) {
        clearTimeout(showtimeout)
        if (XEClipboard.copy(text)) {
          document.querySelector('.copy-status').className = 'copy-status success'
        } else {
          document.querySelector('.copy-status').className = 'copy-status error'
        }
        showtimeout = setTimeout(function () {
          document.querySelector('.copy-status').className = 'copy-status'
        }, 1500)
      }
      document.querySelector('.btn1').addEventListener('click', function (evnt) {
        copyEvent(evnt.target.innerText)
      })
      document.querySelector('.btn2').addEventListener('click', function (evnt) {
        let inpElem = evnt.target.previousElementSibling
        copyEvent(inpElem.value)
      })
      document.querySelector('.btn3').addEventListener('click', function (evnt) {
        let inpElem = evnt.target.previousElementSibling
        copyEvent(inpElem.value)
        inpElem.value = ''
      })
    })()
    </script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils" async></script>
    <script src="https://cdn.jsdelivr.net/npm/xe-ajax" async></script>
  </body>
</html>