Clever Geek Handbook

ブラウザがテキストを強調表示しないようにする方法

あなたがWeb開発者であれば、おそらくユーザーがテキストを選択できないようにする必要がありました。 私は、テキストを保護するための完全な禁止ではなく、あらゆる種類の署名、碑文などの割り当ての禁止を意味します。 ここで選択すると、インターフェイスとユーザーの作業が妨げられます（ほとんどの場合、ドラッグアンドドロップ、またはダブルクリックによるテキストの選択）。 これは主にWebアプリケーションに適用され、情報サイトには適用されません。



何ができますか？ 今のところあまり考えていません。 しかし、（私にとっては）新しい方法に進む前に、テキスト選択に対処するためのオプションを提供しているブラウザーを見ていきます。

インターネットエクスプローラー



このブラウザは2つの可能性を提供します

  1. 要素の場合、値をオンにして選択不可属性を設定します。 ただし、1つの注意点があります。このような属性を持つブロックのテキストは選択できません（つまり、この要素から選択を開始することはできません。無害な「SPAN、Bなど）」の場合、それらのテキストは区別できます。 さらに、そのような属性のないブロックからテキスト選択が開始された場合、選択不可の属性を持つブロック内のテキストも選択されます。 このような状況では、すべての（！）要素をこの属性に設定するという1つの解決策しかありません。これは不便で実用的ではありません。
  2. selectstartイベントをキャッチします。 言い換えると、要素onselectstart = "return false"（たとえばBODYに）を追加すると、その中のテキストを選択できなくなります。 繰り返しになりますが、このようなブロックの外側のテキストを選択し始めた場合、そのブロック内のテキストは問題なく強調表示されます。


FireFox（geckoブラウザー）、Safari（KHTMLブラウザー）



これらのブラウザーには、あらゆる形式のテキストの選択を禁止する、より高度なメカニズムがあります。 これは、CSS3に含まれている値noneのCSSユーザー選択プロパティを介して行われます。 ただし、このプロパティが承認される前に、ブラウザはそれぞれ-moz-user-selectプロパティと-khtml-user-selectプロパティに名前を付けることで、独自のエンジンチップを民主的に作成しました。 ブロック内のテキストが選択されないようにするには、次のように記述するだけで十分です。 

 -moz-user-select：なし;
 -khtml-user-select：なし;
ユーザー選択：なし;


そして、問題は帽子です。

他のブラウザ



しかし、他のブラウザに関しては、彼らはそのようなメカニズムを見ていません。 まったくありません。 もちろん、Operaは他のものよりも先を行っています。彼女にとって、テキスト選択の禁止は最も悪意のある犯罪に匹敵するからです。 しかし、そこには、1つの埋葬地があります:)

昨日、 サイトのハッキングを伴うOperaファイルを調べて 、興味深い行に出会いました。 

 document.addEventListener（ 'mousemove'、function（e）{
   if（e.target.getAttribute（ 'unselectable'）== 'on'）
     e.target.ownerDocument.defaultView.getSelection（）。removeAllRanges（）;
 }、false）;


Internet Explorerの選択不可能な属性を思い出してください。この場合、テキストの選択に苦労していることが明らかになります。 アイデアを開発した後、クロスブラウザソリューションを取得しました。 

関数preventSelection（要素）{
   var preventSelection = false;

  関数addHandler（要素、イベント、ハンドラー）{
     if（element.attachEvent） 
       element.attachEvent（ 'on' +イベント、ハンドラー）;
    他に 
       if（element.addEventListener） 
         element.addEventListener（イベント、ハンドラー、false）;
   }
  関数removeSelection（）{
     if（window.getSelection）{window.getSelection（）。removeAllRanges（）;  }
     else if（document.selection && document.selection.clear）
       document.selection.clear（）;
   }
  関数killCtrlA（イベント）{
     var event = event ||  window.event;
     var sender = event.target ||  event.srcElement;

     if（sender.tagName.match（/ INPUT | TEXTAREA / i））
      帰る

     var key = event.keyCode ||  event.which;
     if（event.ctrlKey && key == 'A'.charCodeAt（0））//' A'.charCodeAt（0）は65に置き換えることができます
     {
       removeSelection（）;

       if（event.preventDefault） 
         event.preventDefault（）;
      他に
         event.returnValue = false;
     }
   }

   //マウスにテキストを選択させない
   addHandler（element、 'mousemove'、function（）{
     if（preventSelection）
       removeSelection（）;
   }）;
   addHandler（要素、「mousedown」、関数（イベント）{
     var event = event ||  window.event;
     var sender = event.target ||  event.srcElement;
     preventSelection =！sender.tagName.match（/ INPUT | TEXTAREA / i）;
   }）;

   // dblclickと戦う
   // dblclickイベントではなく関数をハングさせると、回避できます
   //一部のブラウザでの一時的なテキストの選択
   addHandler（要素、「マウスアップ」、関数（）{
     if（preventSelection）
       removeSelection（）;
     preventSelection = false;
   }）;

   //ボアctrl + A
   //疑いがあるほかに、これはおそらく必要ではない
   //そのような必要性の場合、関数が必要とすること 
   //要素ではなくドキュメントで1回ハング
   addHandler（要素、「キーダウン」、killCtrlA）;
   addHandler（要素、「keyup」、killCtrlA）;
 }


この関数を呼び出すことにより、例えば：

preventSelection(document);





INPUT要素とTEXTAREA要素を除くドキュメント全体での選択を禁止します。

コメント：

  1. Operaではdblclickイベントの処理が許可されていないため、このブラウザではダブルクリックでテキストを選択できます。
  2. Ctrl + A：

    1. Operaでは、この組み合わせを長時間（2〜3秒）保持すると、リリースされるまでテキストが選択されます。 さらに、最初にAキーを押してからCtrlキーを押すと、選択が消えます。 それ以外はそのままです。
    2. Safariは、Ctrlキーを押しながらキーのキーダウンを処理しません。 したがって、テキストの選択は、キーを放した後にのみ消えます。 さらに、このブラウザの特徴は、キーを離す順序に関するOperaの動作です（最初にCtrlを押すと、選択が維持されます）。


  3. ダブルクリックしてテキストを選択します。

    1. SafariとFireFoxが単語を選択し、すぐに選択を削除します。 つまり、短期間のテキスト選択の効果があります。
    2. Operaはデフォルトの動作を禁止していません。 彼女は単語を選択し、コンテキストメニューを呼び出します。




他の機能は確認されていません。

FireFox 2.0.11、IE 6.0、Opera 9.24、Safari 3.0.3（Win）でテスト済み。

もちろん、ソリューションは完全ではなく、JavaScriptが必要です（一方、これはJSを使用するWebアプリケーションで必要です）。 しかし、これは何もしないよりはましであり、非常にクロスブラウザです（もちろん、一部のブラウザとそのバージョンには追加のコードが必要になる場合があります）。

コメント、コメント、追加を喜んでいます。

更新記事の最後の多くの人々は明らかに最初を忘れているか、注意深く読んでいないという事実のために、私は最初の段落の最初の本質を繰り返します。 この記事では、コピーから保護するためにテキストの選択を完全に禁止するという問題を解決しませんでしたが、あらゆる種類の署名、碑文などを強調表示することを禁止することを意味しました。 ここで選択すると、インターフェイスとユーザーの作業が妨げられます（ほとんどの場合、ドラッグアンドドロップ、またはダブルクリックによるテキストの選択）。 これは主にWebアプリケーションに適用され、通常の情報サイトには適用されません。



More articles:


All Articles