最近、ページにコピー機能を実装するにはhtml5 webAppを指定する必要があります。ユーザーはテキストを選択して、長いプレステキストのシステムコピーメニューをポップアップできます。ユーザーはクリックしてコピー操作をコピーしてから貼り付けますAppStoreに対応するアプリケーションを検索します。リンクの形式でアプリストールに対応するアプリケーションに直接ジャンプするために使用されない理由は、ユーザーのアクティブな入力キーワード検索を通じて宣伝されたコーポレートアプリの重みを増やすことです。したがって、このコピー機能はユーザーエクスペリエンスに不可欠です。
いくつかのプラクティスを試してみると、Android/iOSプラットフォームの互換性はあまり良くありません。 WECHATブラウザでは、システムメニューを刺激するために長いプレステキストを簡単に実現できます。しかし、他のブラウザのパフォーマンスは一貫していません。シミュレーションフォーカス入力、JavaScript選択を含め、タグでシステムメニューをアクティブにしてみてください。これらの方法には互換性のある欠陥があります。
1）HREF属性を備えたタグはUCブラウザーとBaiduブラウザで使用されていますが、テキストはこのメニューを選択した後、完全なメニュー/コピーメニューを選択しますが、テキストを選択します。一部のAndroid携帯電話、一部のAndroid携帯電話では、システムブラウザー、iPhoneは純粋なリンクと見なされており、テキストメニューをコピーせずにコピーリンクのみがポップアップします。さらに、少数のブラウザのみが実行可能と見なされている場合でも、これはユーザーを操作するためのより多くのステップがあり、複雑さを高めます。したがって、この計画は望ましくありません。
2）選択方法と範囲のメソッドを使用して、さまざまなブラウザの互換性を考慮する必要があります。
function selecttext {var doc = doctelementbyid（element）、range、range = documentbod ycreatextrange（）; selection = documentcreaterange（）; } else {alert（none）;}}残念ながら、すべてのテキストは、iPhoneのSafariで[window.getSelectionもサポートしているため、クリックしたり長い照度を押したりすることで選択することはできません。Safariブラウザーアドレンジ操作の後にテキストをデフォルトで選択できない理由は、理由についてメッセージを残してください。 ）。したがって、この方法には欠陥があります。中国のテキストエリアの方法を積極的に選択し、後で添付します。
3）iPhoneユーザーは、特定のテキスト選挙区でテキストの周りの空白の領域を長く押していることを知っているかもしれませんが、Safariは選挙区のテキストを自動的に選択します（ターゲットテキストは独立したDivブロックコンテナに配置する必要があります）。この機能に基づいて、CSSマージンを使用して、この機能を使用すると、上記の2番目のメソッドの互換性を解決できます。テスト後、AndroidプラットフォームとiOSプラットフォームに関係なく、携帯電話に付属するシステムブラウザーが互換性があります。 UCブラウザやBaiduブラウザーなどの他のメーカーのモバイル製品については、さまざまなメカニズムがあるため、これらのブラウザメニューによって提供されるフリーレプリケーション機能のみを使用できます。
したがって、jqueryモバイルのTapholdイベントを使用して、すべてのテキストコンテンツを強調するために携帯電話システムのコピーをシミュレートしました。 Tapholdの互換性のあるバグは、プロジェクトが卓越性を必要とする場合、ソリューションを詳細に添付していないことに注意してください。
これが私の解決策です。特定のコードは次のとおりです。
HTMLコード：
<div class = para requirement> <div class = tips tips-t> 1。有効になる前に初めてダウンロードする必要があります<br/> 2。ランキングからダウンロードできません</div> <div class = cparea> <div class = kwd id = kwd> <span> 3つの王国のマスターb>★</b>ドット付きフレームを長く押し、キーワードをコピーします</span> </div> <ダウンロード</a> </div>
JavaScriptコード：
<script type = text/javascript> $（#kwd）bind（taphold、function（）{//はiPhone/itouch/iPad safari var doc = document、text = docgetelementbyid（kwd）、range、selection; if（ docbodyeTextrange） ）;キーCSSコード：
cparea {center：microsoft yahei：} 1875em：75em 1em：webkit-select：2em;} ＃212121;注：ここのマージン：2EMは、Safariブラウザの長いプレスの長い押し関数を達成することです。この2em。最終的に、設計図面と視覚的に一貫しているだけでなく、長い押し刺激システムメニューも実現します。
最後に、Safariをサポートする完全な方法を追加します。
$（#kwd）.bind（taphold、function（）{var documen、text = docgetelementbyid（kwd）、range、selection; if（docbodycreatexrange）{// documentBodyBodyBodyCreateTextrange（）; rangeMovetoElementText（Text）; （）;} if（windogetselection） // firefoxは、TextingineNertext（textineNertextleng）をサポートしています9ドーではありませんTextContent MaseLections（0、TextFirstChildTextContentLength、0、TextFirstChild）; }}）;上記は、この記事のすべての内容です。