6

モバイル ブラウザでテキストを選択したときに、ネイティブの動作をオーバーライドする方法があるかどうかを知りたいです。独自のアクション バーを提供することで、iPhone と Android デバイスの両方をサポートしようとしています。

任意のヒント？

4

3 に答える 3

5

イベントを使用してネイティブ機能と一緒に「アクションバー」を表示することは非常に簡単ですがselectionchange、ネイティブの動作を「置き換え」たい場合は、選択全体を最初から偽造するか、selectionchangeイベントを使用して 2 番目のたとえば、選択したテキストを色付きのスパン要素で囲み、実際の選択をキャンセルします (アクションバーを表示している間)。この方法の問題は、1) ネイティブアクションバーが一瞬表示される可能性があることと、2)経験は、ユーザーが危険な影響を与えることに慣れているものとは異なります。一方、最初から選択を行いたい場合は、user-selectcss プロパティを使用してテキスト選択を無効にし、次に touchstart と thouchend に基づいてどのテキストを「選択」するか (色付きのスパンを使用) を決定します (現実的には、非常に制御された環境 (テキストのみのリーダー アプリケーションなど) でのみ可能です)。

Firefox と Opera ではイベントが発生しないため、これは機能しないことに注意してください。ドキュメントでイベント ハンドラーを使用し、opera モバイルと Firefox モバイルをサポートするために他のすべての touchend イベントのバブリングを停止selectionchangeする必要があります。(動作せず、使用する必要がtouchendあるという事実のクレジットは、Tim Down に送られます)selectselectionchange

于 2012-07-02T08:01:30.220 に答える
2

参照：

プラグインを使用した jsFiddle デモ

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

これは、jsFiddle で示されているjQuery イベント リスナーなど、他のマークアップに干渉しません。.click();

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

サンプル HTML:

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

<p> This text is selectable</p>

サンプル jQuery:

$(document).ready(function(){

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

});

完全な jQuery プラグイン:

$.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');
        });
    }
});
于 2012-07-06T10:31:11.423 に答える
0

選択を防ぐことが目的の場合は、次のような CSS を使用できます。

body 
{ 
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
于 2012-07-06T16:01:36.830 に答える