web-dev-qa-db-ja.com

Mobile Safari / Webkitで長押しするとテキストが強調表示される拡大鏡を無効にする

IPhoneウェブサイトにテキストが含まれていない要素がいくつかありますが、ユーザーがそれらをクリックして押し続ける必要があります（DIV）。これにより、テキストの強調表示/編集ループ/カーソルが表示されるため、気が散ります。

クリック可能な要素がタッチされたときに表示されるブラックボックスを削除するためのCSSルールがあることを知っています。テキスト拡大鏡を無効にするようなものはありますか？

iphonewebkit
47
3n.

デベロッパーセンターのヘルプデスクから回答がありました。このCSSルールを追加する必要がありました：

-webkit-user-select: none;
49
3n.

このCSSコードを使用する

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
6
vitralyoz

これは、画像など、コピーまたは保存したくないコンテンツの保護にも役立ちます。

#yourdiv img {-webkit-touch-callout: none; }
5
Jay from BKK

JSでこれは私のためにそれを解決しました：

document.getElementsByTagName("body")[0].addEventListener("touchstart",
 function(e) { e.returnValue = false });

そこにあるOSは何でもバイパスしてタッチをキャッチしているようです。

4
andrwct

自分で試してみて、これを見つけました。最初に、このルールを囲み要素に追加する必要があります。

-webkit-user-select: none;

しかし、それだけでは、iPhoneでは十分ではありません。たとえば、親要素が選択を受け入れるため、または単にそのように感じるために、虫眼鏡がまだ表示されていることがわかります。

しかし、私は次に何かクールなものを発見しました-要素がtouchendおよびclickハンドラーを要素に追加した場合、AppleのSafariは、虫眼鏡が表示される原因となる迷惑なコードパスを最終的に回避し、おそらく実現しますこの要素は、UIのやり取りのためのものであり、テキストを選択するためのものではありません。同様に素晴らしい点として、画面の上部近くの要素でこれを行うと、横長モードでのナビゲーションの外観もキャンセルされます。しかし、下部の要素をクリックしたときにナビゲーションの外観をキャンセルする方法がわからない、誰かがその解決策を持っていますか？

3
Gregory Magarshak

これをCSSに追加します

body {
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */}
2
Pham Van Vung