>  기사  >  웹 프론트엔드  >  JS로 만든 클릭 복사 효과

JS로 만든 클릭 복사 효과

php中世界最好的语言
php中世界最好的语言원래의
2018-03-12 11:37:311854검색

이번에는 JS로 만든 클릭 복사 효과를 가져오겠습니다. JS로 만든 클릭 복사 효과의 주의사항은 무엇인가요?
원리:

복사를 수행하기 위해 모든 양식 선택의 텍스트 영역 데이터를 통해 브라우저 복사 명령 호출을 시뮬레이션합니다.


<!DOCTYPE html><html><head>
    <meta charset="UTF-8"> 
    <title>复制</title></head><body>
    <script>  
           var textCopy=function (data) {                var f=document.createElement("form");
                f.id="copy-"+Date.parse(new Date());
                f.onsubmit=function(){return false};
                f.style="opacity: 0;height: 1px;width: 1px;overflow: hidden;position:fixed;top: -1;left: -1;z-index: -1;"
                f.innerHTML=`<button onclick=&#39;story.select();document.execCommand("Copy");&#39;></button>
                <textarea name="story">${data}</textarea>`;                document.body.appendChild(f);                document.querySelector(`#${f.id}>button`).click();  
                document.body.removeChild(document.getElementById(f.id));
            } 
    </script>
    <input id="test"  value="" />
    <button onclick="textCopy(document.getElementById(&#39;test&#39;).value)" >复制</button>    </body></html>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

관련 읽기:

nodejs를 사용하여 업로드 이미지 인터페이스 테스트 클라이언트를 작성하는 방법

h5를 사용하여 성능 변경 선 차트를 만드는 방법

nodejs jsonp를 통해 싱글 사인온 데모를 구현하는 방법

위 내용은 JS로 만든 클릭 복사 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.