今回はモバイル端末上で全選択ハイライトテキストイベントを実現するための注意点をご紹介します。実際のケースを見てみましょう。
最近、HTML5 WebAPP のページにコピー機能を実装する必要があります。ユーザーがテキストをクリックして長押しすると、すべてのテキストが選択され、システムの「コピー」メニューがポップアップ表示されます。 「コピー」でコピー操作を実行し、それをAppStoreに貼り付けて、対応するアプリケーションを検索します。リンクフォームを使用して該当する AppStore アプリケーションに直接ジャンプしない理由は、ユーザーが積極的にキーワード検索を入力することで、プロモーションされるエンタープライズ アプリケーションの比重を高めるためです。したがって、この「コピー」機能はユーザーエクスペリエンスにとって非常に重要です。
いくつかの方法を試しましたが、Android/iOSプラットフォームでの互換性はあまり良くありません。 WeChat ブラウザでは、テキストを長押ししてシステム メニューをアクティブにし、選択したすべてのテキスト コンテンツを強調表示するのが簡単です。ただし、他のブラウザでのパフォーマンスはそれほど安定していません。これには、フォーカス入力、JavaScript 選択のシミュレート、および a タグを使用したシステム メニューのアクティブ化の試行が含まれます。これらのメソッドにはすべて互換性の問題があります。
1) UCブラウザ、Baiduブラウザでhref属性のタグを使用してテキストを長押しすると、「フリーコピー」/「テキスト選択」メニューが表示されますが、このメニューを選択すると「すべて選択/コピー」が表示されます。 . メニューがありますが、一部の Android 携帯電話や iPhone のシステム ブラウザでは純粋なリンクとみなされ、「テキストのコピー」メニューは表示されず「リンクのコピー」のみが表示されます。さらに、たとえ少数のブラウザのみが実行可能であると考えられる場合でも、これによりユーザーの操作に 1 つのステップが追加され、複雑さが増します。したがって、この解決策はお勧めできません。
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 デバイスでの上記 2 番目の方法の非互換性を解決できます。テストの結果、Android および iOS プラットフォームに関係なく、一般的な携帯電話に付属するシステム ブラウザーは互換性があります。 UC BrowserやBaidu Browserなど他メーカーのモバイル製品については、仕組みが異なるため、これらのブラウザメニューにある「無料コピー」機能のみご利用いただけます。
そこで、2 番目と 3 番目のメソッドを組み合わせて、jQuery モバイルのタップホールド イベントを使用して、モバイル システムのコピー メニューをトリガーするロングタップ操作をシミュレートしました。これは基本的にすべてのモバイル デバイスのブラウザーで実装できます。すべてのテキストコンテンツを強調表示します。もう 1 つ、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>ログイン後にコピー
Key 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 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
JS での日付関連関数の使用の詳細な説明
JS での折りたたみ可能なパネルの使用の詳細な説明
以上がモバイル端末は、選択および強調表示された全選択テキスト イベントを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
