HTML5를 활성화하여 모바일 복사 기능을 구현하는 방법

이 글에서는 모바일 측 복사 기능의 HTML5 구현을 주로 소개합니다. 또한 모바일 측 붙여넣기 및 복사 기능을 구현하기 위한 구현 코드도 소개합니다

이런 요구가 생겼을 때 가장 먼저 해야 할 일은 Baidu를 사용해 보았지만 기본적으로 js를 사용하여 구현되었으며 호환성이 매우 좋지 않다는 것을 알았습니다.

그런데 검색하고 시도하는 과정에서 CSS 코드만으로 완전히 구현할 수 있다는 것을 알았습니다. 내용을 복사해야 하는 태그에 다음 코드 줄을 추가하면 됩니다.

-webkit-touch-callout: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;

실제로는 사용자의 콘텐츠 조작이 제한되지 않으며 시스템 기본 메뉴가 비활성화되지 않는다는 의미입니다. 길게 누르면 복사를 위한 시스템 자체 복사 기능이 표시됩니다.

clipboard.js를 사용하여 모바일 단말기에서 붙여넣기 및 복사 구현

clipboard.js는 붙여넣기 및 복사를 위한 매우 강력한 플러그인이지만 모바일 단말기에서 사용할 경우 호환성 문제가 발생합니다. 제가 자주 사용하는 솔루션은 다음과 같습니다.

html

<input id="foo1"  value="http://www.shellad.com/_2SP__22（要复制的内容）" readonly="readonly">
<p class="the_btn_con"><button class="btn" data-clipboard-target="#foo1">复制</button></p>

js

$(function () {
       var clipboard = new Clipboard('.btn');
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
       clipboard.on('success', function(e) {
           alert('复制成功!')
           console.log($(this))
           e.clearSelection();
       });
       clipboard.on('error', function(e) {
           alert('请选择“拷贝”进行复制!')
       });
   })

복사할 내용을 저장할 때 p나span 대신 입력 컨트롤을 사용한다는 점에 유의하세요. 테스트 중에는 입력만 호환성이 가장 좋고 문제가 발생하지 않으며 정상적인 복제를 보장할 수 있기 때문입니다. 동시에 해당 플러그인은 Safari 버전

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

WeChat 및 앱에서 자동으로 재생되도록 HTML5 페이지 오디오 및 비디오를 구현하는 방법

H5 휴대폰 이미지 업로드 플러그인 코드

위 내용은 HTML5를 활성화하여 모바일 복사 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!