web-dev-qa-db-ja.com

モバイルウェブ-ロングタッチ/タップホールドのテキスト選択を無効にします

_user-select_のバリエーションを使用してテキストの選択を無効にすることについてはすべて見たり聞いたりしましたが、私が抱えている問題に対してはどれも機能しません。 Android（およびiPhoneを想定しています）では、テキストをタップアンドホールドすると、テキストが強調表示され、テキストをドラッグして選択するための小さなフラグが表示されます。これらを無効にする必要があります（画像）：

screenshot

私は_-webkit-touch-callout_を試してみましたが、役に立たないように$('body').on('select',function(e){e.preventDefault();return;});などのことも試しました。また、::selection:rgba(0,0,0,0);のような安価なトリックも機能しません。これらを非表示にしても効果がないためです。選択は引き続き行われ、UIが中断されます。さらに、これらのフラグはまだ存在すると思います。

どんな考えでも素晴らしいでしょう。ありがとう！

androidiphonecssmobilehighlight
24
Brad Orego

参考：

jsFiddle Demo with Plugin

上記のjsFiddleデモでは、プラグインを使用してテキストブロックが選択されないようにしていますAndroidまたはiOSデバイス（デスクトップブラウザも同様）。

使い方は簡単で、jQueryプラグインをインストールした後のサンプルマークアップを次に示します。

サンプルHTML：

_<p class="notSelectable">This text is not selectable</p>

<p> This text is selectable</p>
_

サンプルjQuery：

_$(document).ready(function(){

   $('.notSelectable').disableSelection();

});
_

プラグインコード：

_$.fn.extend({
    disableSelection: function() {
        this.each(function() {
            this.onselectstart = function() {
                return false;
            };
            this.unselectable = "on";
            $(this).css('-moz-user-select', 'none');
            $(this).css('-webkit-user-select', 'none');
        });
        return this;
    }
});
_

メッセージごとのコメント：I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

このプラグインの影響を受けないラッパーを使用するラッパーを使用する 、それでもテキストコンテンツはこのプラグインを使用して保護されています。

テキストのブロック内のリンクとの相互作用を許可するには、リンク以外のすべてに_span tags_を使用し、それらの_.notSelected_のみにクラス名_span tags_を追加して、選択と相互作用を維持することができますアンカーリンク。

ステータスの更新：この更新 jsFiddle 確認テキスト選択が無効になっていると、おそらく他の機能が動作しない可能性があると心配しています。この更新されたjsFiddleには、太字テキストがテキストで選択できない場合でも、太字テキストがクリックされたときにブラウザーアラートを発生させるjQuery Clickイベントリスナーが示されています。

15
arttronics
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);

これにより、ブラウザごとに無効になります。

39
CoreyRS

-webkit-user-select：none; Android= 4.1（申し訳ありません）までサポートされていませんでした。

2
John Reck