이번에는 전체 선택 텍스트 이벤트를 모바일 단말기에서 구현하기 위한 노트를 가져오겠습니다. 실제 사례를 살펴보겠습니다.
최근 HTML5 WebAPP 페이지에 복사 기능을 구현해야 합니다. 사용자가 텍스트를 클릭하고 길게 누르면 모든 텍스트가 선택되고 사용자가 클릭할 수 있는 시스템 "복사" 메뉴가 나타납니다. "복사"를 눌러 복사 작업을 수행한 후 AppStore에 붙여넣어 해당 애플리케이션을 검색하세요. 해당 AppStore 애플리케이션으로 직접 점프하기 위해 링크 형태를 사용하지 않는 이유는 사용자의 능동적인 키워드 검색 입력을 통해 홍보하는 기업용 App의 비중을 높이기 위함이다. 따라서 이 "복사" 기능은 사용자 경험에 매우 중요합니다.
몇가지 방법을 시도해 보았으나 안드로이드/iOS 플랫폼에서의 호환성이 별로 좋지 않습니다. WeChat 브라우저에서는 텍스트를 길게 눌러 시스템 메뉴를 활성화하고 선택한 모든 텍스트 콘텐츠를 강조표시하는 것이 쉽습니다. 그러나 다른 브라우저의 성능은 그다지 일관적이지 않습니다. 포커스 입력 시뮬레이션, JavaScript 선택 및 태그를 사용하여 시스템 메뉴 활성화를 시도하는 것을 포함합니다. 이러한 방법에는 모두 호환성 결함이 있습니다.
1) UC 브라우저, 바이두 브라우저에서 href 속성이 있는 태그를 사용해 텍스트를 길게 눌러도 "무료 복사"/"텍스트 선택" 메뉴가 나타납니다. 이 메뉴를 선택하면 "모두 선택/복사"가 나타납니다. . 메뉴가 있으나, 일부 안드로이드폰, 아이폰의 시스템 브라우저에서는 순수 링크로 간주되어 '텍스트 복사' 메뉴 없이 '링크 복사'만 팝업되는 현상이 발생하고 있습니다. 게다가, 소수의 브라우저만 가능하다고 생각하더라도 이는 사용자의 작업에 한 단계 더 추가되고 복잡성을 증가시킵니다. 따라서 이 솔루션은 권장되지 않습니다.
2) 선택 및 범위 방법을 사용하려면 다양한 브라우저의 호환성을 고려해야 합니다. 코드는 다음과 같습니다.
function selectText(element) {
var doc = document,
text = docgetElementById(element),
range,
selection;
if (docbodycreateTextRange) {
range = documentbodycreateTextRange();
rangemoveToElementText(text);
rangeselect();
} else if (windowgetSelection) {
selection = windowgetSelection();
range = documentcreateRange();
rangeselectNodeContents(text);
selectionremoveAllRanges();
selectionaddRange(range);
/*if(selectionsetBaseAndExtent){
selectionsetBaseAndExtent(text, 0, text, 1);
}*/
}else{
alert("none");
}
}로그인 후 복사
안타깝게도 iPhone Safari에서는 여전히 클릭하거나 길게 눌러 모든 텍스트를 강조 표시할 수 없습니다. 또한 window .getSelection을 지원합니다. Safari 브라우저에서 addRange 작업 후 기본적으로 텍스트를 선택할 수 없는 이유를 알고 계시다면 메시지를 남겨주세요. 따라서 이 접근 방식에는 결함이 있습니다. 텍스트 영역을 능동적으로 선택하는 방법은 나중에 첨부합니다.
3) iPhone 사용자는 텍스트 선택 항목에서 텍스트 주위의 빈 영역을 길게 누르면 Safari가 선택 항목의 모든 텍스트를 자동으로 강조 표시하고 선택한다는 것을 알고 있을 것입니다(대상 텍스트는 독립적인 p 블록에 배치되어야 함). 레벨 컨테이너). 이 기능에 따르면 CSS 마진을 사용하여 수정하면 위의 두 번째 방법이 iOS 기기에서 호환되지 않는 문제를 해결할 수 있습니다. 테스트 결과 Android 및 iOS 플랫폼에 관계없이 일반 휴대폰에 제공되는 시스템 브라우저는 호환됩니다. UC 브라우저, 바이두 브라우저 등 타사 모바일 제품의 경우 메커니즘이 다르기 때문에 해당 브라우저 메뉴에서 제공하는 "무료 복사" 기능만 사용할 수 있습니다.
그래서 두 번째와 세 번째 방법을 결합하고 jQuery 모바일에서 taphold 이벤트를 사용하여 모바일 시스템의 복사 메뉴를 트리거하는 롱탭 작업을 시뮬레이션했습니다. 이는 기본적으로 모든 모바일 장치 브라우저에서 텍스트 영역을 길게 눌러 구현할 수 있습니다. 모든 텍스트 내용을 강조 표시합니다. 한 가지 더, Taphold의 호환 가능한 버그는 여기에 자세히 설명되어 있지 않으며, 프로젝트에 우수성이 필요한 경우 솔루션을 직접 검색할 수 있습니다.
내 솔루션은 다음과 같습니다. 구체적인 코드는 다음과 같습니다.
HTML 코드:
<p class=" para requirement">
<p class="tips tips-t">
1、必须首次下载才生效<br/>
2、不能从排行榜下载哦
</p>
<p class="cparea">
<p class="kwd" id="kwd"><span>三国艳义手机优化大师</span></p>
</p>
<p class="cparea">
<span class="kdes"><b>★</b>长按虚线框,拷贝关键词</span>
</p>
<a href="https://itunesapplecom/cn/" data-role="button" class="downlink">去AppStore搜索下载</a>
</p>
로그인 후 복사
JavaScript 코드:
<script type="text/javascript">
$("#kwd")bind("taphold", function(){ //不支持iPhone/iTouch/iPad Safari
var doc = document,
text = docgetElementById("kwd"),
range,
selection;
if (docbodycreateTextRange) {
range = documentbodycreateTextRange();
rangemoveToElementText(text);
rangeselect();
} else if (windowgetSelection) {
selection = windowgetSelection();
range = documentcreateRange();
rangeselectNodeContents(text);
selectionremoveAllRanges();
selectionaddRange(range);
}else{
alert("浏览器不支持长按复制功能");
}
});
</script>로그인 후 복사
핵심 CSS 코드:
cparea{
text-align: center;
font-family: Microsoft Yahei;
margin: -2em 0 0;
}
kwd{
display: inline-block;
color: #272727;
background-color: #fff;
font-size: 1875em;
font-size: 1875em;
padding: 75em 1em;
border: 1px dashed #e60012;
-webkit-user-select:element;
margin: 2em;
}
kwd span{
display: block;
border: 1px solid #fff;
}
kdes{
display: inline-block;
color: #212121;
font-size: 875em;
padding-top: 0;
}
kdes b{
color: #ed5353;
font-size: 25em;
padding-right: 1em;
}로그인 후 복사
설명: 여백: 2em은 Safari 브라우저에서 길게 누르기 모든 기능 선택을 정확하게 구현하기 위한 것입니다. 존중하지 않고 디자인 초안 효과를 복원하기 위해 상위 컨테이너 .cparea는 음수 여백을 사용하여 2em 여백을 상쇄합니다. 결국 설계 도면과 시각적으로 일관되게 되었을 뿐만 아니라, 길게 눌러 전체 선택이 가능하도록 하여 시스템 메뉴를 활성화할 수 있게 되었습니다.
마지막으로 Safari를 지원하는 완전한 방법을 추가하겠습니다.
$("#kwd").bind("taphold", function(){
var doc = document,
text = docgetElementById("kwd"),
range,
selection;
if (docbodycreateTextRange) { //IE
range = documentbodycreateTextRange();
rangemoveToElementText(text);
rangeselect();
} else if (windowgetSelection) { //FF CH SF
selection = windowgetSelection();
range = documentcreateRange();
rangeselectNodeContents(text);
selectionremoveAllRanges();
selectionaddRange(range);
//测试
consolelog(texttextContent);
textinnerText && consolelog(textinnerText); //FireFox不支持innerText
consolelog(texttextContentlength);
textinnerText && consolelog(textinnerTextlength); //在Chrome下长度比IE/FF下多1
consolelog(textfirstChildtextContentlength);
textinnerText && consolelog(textfirstChildinnerTextlength);
consolelog(textfirstChildinnerHTMLlength);
//注意IE9-不支持textContent
makeSelection(0, textfirstChildtextContentlength, 0, textfirstChild);
/*
if(selectionsetBaseAndExtent){
selectionselectAllChildren(text);
selectionsetBaseAndExtent(text, 0, text, 4);
}
*/
}else{
alert("浏览器不支持长按复制功能");
}
});
function makeSelection(start, end, child, parent) {
var range = documentcreateRange();
//consolelog(parentchildNodes[child]);
rangesetStart(parentchildNodes[child], start);
rangesetEnd(parentchildNodes[child], end);
var sel = windowgetSelection();
selremoveAllRanges();
seladdRange(range);
}로그인 후 복사
이 기사의 사례를 읽으신 후 이 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
추천 도서:
JS의 날짜 관련 기능 사용에 대한 자세한 설명
JS의 폴더블 패널 사용에 대한 자세한 설명
위 내용은 모바일 단말기는 선택 및 강조된 전체 선택 텍스트 이벤트를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
