js 작업 복사 텍스트

이번에는 텍스트를 복사하는 js 작업을 가져오겠습니다. js 작업에서 텍스트를 복사할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 살펴보겠습니다.

최근에

태그의 텍스트를 클립보드에 복사하려면 버튼을 클릭해야 하는 경우가 발생했습니다.

이전에 입력 상자의 내용을 복사한 적이 있는데 거의 똑같다고 생각했습니다. 전혀 안 되더라고요

다양한 방법을 시도해 보았는데 이 방법은 결국 블라인드 트릭을 사용하여 다음과 같은 효과를 얻었습니다

1. 원리 분석

브라우저는 복사할 수 있는 복사 명령을 제공합니다. 선택한 내용

document.execCommand("copy")

입력 상자인 경우 select() 메소드를 전달하고 입력 상자의 텍스트를 선택한 다음 복사 명령을 호출하여 해당 텍스트를 클립보드에 복사할 수 있습니다

하지만 select() 메소드는 및 에만 유효합니다. <p>는 사용하기 쉽지 않습니다.</p> <p style="text-align: left;">최종 해결책은 페이지에 <textarea>를 추가한 다음 숨기는 것입니다.

버튼을 클릭할 때 먼저 값을 <p>innerText로 변경한 후 </p> <p style="text-align: left;"><strong></strong></p>코드 구현 <p style="text-align: left;"><strong></strong>HTML 부분</p> <pre class="brush:php;toolbar:false"><style> .wrapper {position: relative;} #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;} </style> <p>   </p><p>我把你当兄弟你却想着复制我？</p>   <textarea>这是幕后黑手</textarea>   <button>copy</button> </pre>

JS 부분

<script>
  function copyText() {
   var text = document.getElementById("text").innerText;
   var input = document.getElementById("input");
   input.value = text; // 修改文本框的内容
   input.select(); // 选中文本
   document.execCommand(&quot;copy&quot;); // 执行浏览器复制命令
   alert("复制成功");
  }
 </script>

개인 테스트, Firefox 48.0, Chrome 60.0, IE 8 모두 사용 가능

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사를 주목하세요. 중국사이트!

추천 도서:

WeChat 미니 프로그램에서 클래스 이름을 동적으로 바인딩하는 방법

주소록 이니셜 검색 기능 구현

위 내용은 js 작업 복사 텍스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!