이 요구 사항을 처음 접한 것은 Baidu를 통해서 였지만 기본적으로 js를 사용하여 구현되었으며 호환성이 매우 좋지 않다는 것을 알았습니다.
하지만 검색하고 시도해보는 과정에서 CSS 코드만으로 완벽하게 구현할 수 있다는 것을 알게 되었습니다. 콘텐츠를 복사해야 하는 태그에 다음 코드 줄만 추가하면 됩니다.
-webkit-touch-callout: 모두;-webkit-user-select: 모두;-moz-user-select: 모두;-ms-user-select: 모두;user-select: 모두;
실제로 이는 사용자의 콘텐츠 조작이 제한되지 않으며 시스템 기본 메뉴가 비활성화되지 않음을 의미합니다. 길게 누르면 복사를 위한 시스템 내장 복사 기능이 표시됩니다.
Clipboard.js를 사용하여 모바일 붙여넣기 및 복사 구현Clipboard.js는 붙여넣기 및 복사에 매우 강력한 플러그인이지만, 모바일 단말에서 사용할 경우 호환성 문제가 발생할 수 있습니다. 제가 자주 사용하는 솔루션은 다음과 같습니다.
HTML
<input id=foo1 value=http://www.shellad.com/_2SP__22 (복사할 내용) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>복사< /버튼></div>
JS
$(function () { var 클립보드 = new Clipboard('.btn'); //우아한 다운그레이드: Safari 버전 번호 >=10, 복사가 성공했다는 메시지가 표시됩니다. 그렇지 않으면 이후 복사본을 수동으로 선택해야 한다는 메시지가 표시됩니다. 텍스트 선택 clipsboard.on ('success', function(e) { Alert('복사 성공!') console.log($(this)) e.clearSelection(); }); 함수(e) { Alert('복사하려면 복사를 선택하세요!') }) })복사할 콘텐츠를 저장할 때 div 또는 범위 대신 입력 컨트롤을 사용한다는 점에 유의하세요. 테스트 중에는 입력만 호환성이 가장 좋고 문제가 발생하지 않으며 정상적인 복제를 보장할 수 있기 때문입니다. 동시에 플러그인은 Safari 버전 번호 <10을 지원하지 않으므로 이 점 유의하시기 바랍니다.
요약위 내용은 에디터가 소개한 HTML5 모바일 복사 기능 구현입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!