최근 페이지에서 복사 기능을 구현하려면 HTML5 WebApp을 제공해야합니다. 사용자는 텍스트를 선택하고 Long Press 텍스트에서 시스템 복사 메뉴를 팝업 할 수 있으며 사용자는 복사 작업을 위해 복사 한 다음 붙여 넣을 수 있습니다. 해당 애플리케이션을 검색하는 AppStore에 있습니다. 링크 형태의 AppStore 해당 응용 프로그램으로 직접 이동하는 데 사용되지 않는 이유는 사용자의 활성 입력 키워드 검색을 통해 프로모션 된 회사 앱의 무게를 높이기 때문입니다. 따라서이 복사 기능은 사용자 경험에 필수적입니다.
몇 가지 관행을 시도하면 Android/IOS 플랫폼의 호환성은 그리 좋지 않습니다. WeChat 브라우저에서는 시스템 메뉴를 자극하기 위해 긴 텍스트를 쉽게 얻을 수 있습니다. 그러나 다른 브라우저의 성능은 일관성이 없습니다. 시뮬레이션 초점 입력, JavaScript 선택을 포함하여 태그로 시스템 메뉴를 활성화하십시오. 이 방법에는 호환 결함이 있습니다.
1) UC 브라우저 및 Baidu 브라우저에서 HREF 속성이있는 태그가 사용되지만 텍스트가 무료로 표시/텍스트 메뉴를 선택하면 전체 선택/복사 메뉴가 나타납니다. 일부 Android 전화 (일부 Android 전화, 시스템 브라우저 및 iPhone)에서는 순수한 링크로 간주되며 텍스트 메뉴를 복사하지 않고 복사 링크 만 팝업됩니다. 또한 소수의 브라우저 만 실현 가능한 것으로 간주 되더라도 사용자를 작동시키는 단계가 더 높아 복잡성이 증가합니다. 따라서이 계획은 바람직하지 않습니다.
2) 선택 및 범위 방법의 도움으로 다른 브라우저의 호환성을 고려해야합니다.
함수 selectText (요소) {var doc = docgetElementById (exember), if (docbodycreatextrange) {documentbod ycreatextrange (); selectselectection () } else {alert (없음);}}불행히도 iPhone Safari에서 High Lit을 클릭하거나 긴 눌러 모든 텍스트를 선택할 수 없습니다 (Window.getSelection도 지원하므로 Safari 브라우저 ADDRANGE 작업 후에 텍스트를 기본적으로 선택할 수없는 이유는 이유가 있으므로 메시지를 남겨주세요. ). 따라서이 방법에는 결함이 있습니다. 중국어 텍스트 영역의 방법을 적극적으로 선택하고 나중에 첨부하십시오.
3) iPhone 사용자는 특정 텍스트 선거구에서 텍스트 주위의 빈 영역을 긴 눌러 오랫동안 선거구에서 텍스트를 자동으로 선택한다는 것을 알 수 있습니다 (대상 텍스트는 독립적 인 DIV 블록 컨테이너에 배치해야 함). 이 기능을 기반으로 CSS 마진을 사용 하여이 기능을 사용하면 iOS 장치에서 위의 제 2 메소드의 비 호환성을 해결할 수 있습니다. 테스트 후 Android 및 iOS 플랫폼에 관계없이 휴대폰과 함께 제공되는 시스템 브라우저는 호환됩니다. UC 브라우저 및 바이두 브라우저와 같은 다른 제조업체의 모바일 제품은 다양한 메커니즘이 있기 때문에 이러한 브라우저 메뉴에서 제공하는 무료 복제 기능 만 사용할 수 있습니다.
따라서 jQuery Mobile의 Taphold 이벤트를 사용하여 LongTap 작업을 위해 휴대 전화 시스템의 사본을 시뮬레이션하여 모든 텍스트 내용을 강조합니다. Taphold의 호환 버그는 프로젝트에 우수성이 필요한 경우 솔루션을 직접 검색 할 수 있습니다.
여기 내 해결책이 있습니다. 특정 코드는 다음과 같습니다.
HTML 코드 :
<div class = para 요구 사항> <div class = tips-t> 1. 발효하기 전에 처음으로 다운로드해야합니다 <br/> 2. 순위에서 다운로드 할 수 없습니다 </div> <div. class = cparea> <div class = kwd id = kwd> <span> 세 왕국의 마스터 yanyi 휴대 전화 최적화 </div> </div> </div> <div class = cparea> <span class = kdes> < b> ★ </b> 길이가 붙은 프레임을 누르고, 키워드를 복사합니다. 다운로드 </a> </div>
자바 스크립트 코드 :
<script type = text/javaScript> $ (#kwd) bind (taphold, function () {// iPhone/itouch/iPad safari doc = document, text = docgetElementByid (kwd), 범위, 선택; if (if) DocbodyCreatextrange (rangemovetolemptextext); )} elere {브라우저는 긴 프레스 기능을 지원하지 않습니다);주요 CSS 코드 :
CPAREA {텍스트-가족; 1875EM; 패딩 : 75EM 1EM; 1PX 점선 #E60012; #212121;참고 : 여기서 : 2em은 Safari 브라우저의 긴 압박의 긴 압박 기능을 달성하기 위해서는 부정적인 측면 거리를 사용하여 외부 거리를 상쇄합니다. 이 2em. 결국, 디자인 도면과 시각적으로 일치 할뿐만 아니라 긴 압박 자극 시스템 메뉴도 달성합니다.
마지막으로 Safari를 지원하는 완전한 방법을 추가하십시오.
$ (#kwd) .bind (taphold, function () {var doc = documen, text = docgetElementByid (kwd), 범위, 선택; if (docbodycreatexrange) {// ee range = documentbodycreatextrange (); rangemovetoElementText (텍스트); () else (windowgetselection) {ff ch sf windowgetselection (); firefox는 instrtextcontextleng (textininenertextlength) (TextFirstChildTextLength); 9 가지 TextContent를 지원합니다. 0, TextFirstChildTextContentLength, 0, TextFirstChild) {SelectSelectallchildren (Text, 0, Text, 4); }}; sel = sellemoveallranges ();위는이 기사의 모든 내용입니다.