Html5 클립보드 기능 구현

이 글은 주로 Html5 클립보드 기능의 구현 코드를 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

최근 Vue를 사용하여 Line(중국의 WeChat과 유사한 일본 및 한국 플랫폼)의 임베디드 H5를 개발했습니다. 요구 사항 중 하나는 현재 링크를 붙여넣은 다음 PC로 보내고 컴퓨터에서 여는 것입니다. 모든 컬렉션에서 여러 가지 상황이 발견되었습니다.

1. 입력 입력 상자가 없는 기본 js 방법

이 상황은 입력 상자가 아닌 텍스트를 클립보드에 복사하는 데 적합합니다.

     <h1 id="content">被复制的内容</h1>
     <button id="button">点击复制</button>

     <script>
        (function(){
            button.addEventListener(&#39;click&#39;, function(){
                var copyDom = document.querySelector(&#39;#content&#39;);
                //创建选中范围
                var range = document.createRange();
                range.selectNode(copyDom);
                //移除剪切板中内容
                window.getSelection().removeAllRanges();
                //添加新的内容到剪切板
                window.getSelection().addRange(range);
                //复制
                var successful = document.execCommand(&#39;copy&#39;);

                try{
                    var msg = successful ? "successful" : "failed";
                    alert(&#39;Copy command was : &#39; + msg);
                } catch(err){
                    alert(&#39;Oops , unable to copy!&#39;);
                }
            })
        })()
    </script>

2. 입력 상자가 있는 메소드

는 입력 및 텍스트 영역의 텍스트를 복사하는 데 사용됩니다

    <input type="text" id="input" value="17373383"> <br>
    <button type="button" id="button">复制输入框中内容</button>
    <script>
        (function(){
            button.addEventListener(&#39;click&#39;, function(){
                input.select();
                document.execCommand(&#39;copy&#39;);
                alert(&#39;复制成功&#39;);
            })
        })()
    </script>

이 메소드는 확장될 수도 있으며 메소드 1과 동일한 목적으로 사용됩니다. 입력 상자를 동적으로 생성하고 해당 내용을 복사하려는 내용으로 설정한 다음 마지막으로 제거하거나 숨깁니다.

3.js 클립보드 플러그인(clipboard.js)에 콘텐츠 복사

clipboard.js 공식 웹사이트
clipboard.js CDN 주소

참조 방법:
NPM npm install --save clipsboard<code>npm install --save clipboard<br/>CDN <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>CDN <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>

                <!--默认是截取.btn中的 data-clipboard-text的属性值-->
                <!-- <button class="btn" data-clipboard-text="3">Copy</button> -->
                
                <!--截取input输入框中的值-->
                <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
            
                <!-- Trigger -->
                <button class="btn" data-clipboard-target="#foo">
                    <img src="assets/clippy.svg" alt="Copy to clipboard">
                </button>
            
                <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
            
                <script>
            
                   
                    var clipboard = new ClipboardJS(&#39;.btn&#39;);
                    
                    clipboard.on(&#39;success&#39;, function (e) {
                        console.log(e);
                    });
                    clipboard.on(&#39;error&#39;, function (e) {
                        console.log(e);
                    });
                    
                </script>

내부에는 다양한 고급 사용법이 있으며, 자세한 내용은 공식 웹사이트 로직을 참조하세요. Clipboard 공식 웹사이트

4. Vue 프레임워크 vue-clipboard2

    import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2'
     
    VueClipboard.config.autoSetContainer = true // add this line
    Vue.use(VueClipboard)

Sample1

에서 제공하는 클립보드 플러그인입니다.

    <p id="app"></p>     
    <template id="t">
      <p class="container">
        <input type="text" v-model="message">
        <button type="button"
          v-clipboard:copy="message"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError">Copy!</button>
      </p>
    </template>    
    <script>
    new Vue({
      el: &#39;#app&#39;,
      template: &#39;#t&#39;,
      data: function () {
        return {
          message: &#39;Copy These Text&#39;
        }
      },
      methods: {
        onCopy: function (e) {
          alert(&#39;You just copied: &#39; + e.text)
        },
        onError: function (e) {
          alert(&#39;Failed to copy texts&#39;)
        }
      }
    })
    </script>

Sample2

      <p id="app"></p>     
      <template id="t">
        <p class="container">
        <input type="text" v-model="message">
        <button type="button" @click="doCopy">Copy!</button>
        </p>
      </template>
     
      <script>
      new Vue({
        el: &#39;#app&#39;,
        template: &#39;#t&#39;,
        data: function () {
          return {
            message: &#39;Copy These Text&#39;
          }
        },
        methods: {
          doCopy: function () {
            this.$copyText(this.message).then(function (e) {
              alert(&#39;Copied&#39;)
              console.log(e)
            }, function (e) {
              alert(&#39;Can not copy&#39;)
              console.log(e)
            })
          }
        }
      })
      </script>

위 내용은 모두의 학습에 도움이 되길 바랍니다.

관련 권장 사항:

HTML5 터치 이벤트를 통해 모바일 측에 간단한 진행률 표시줄을 구현하는 방법

Html5 모바일 측 수상 경력에 빛나는 원활한 스크롤 애니메이션 구현

html5 터치 이벤트를 구현하고 터치 스크린 페이지에서 아래로 슬라이딩

위 내용은 Html5 클립보드 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!