web-dev-qa-db-ja.com

HTMLまたはJSで強調表示を無効にするにはどうすればよいですか？

Webアプリで選択したテキストの強調表示を無効にする必要があります。私にはこれを行う正当な理由があり、これは一般的に悪い考えであることを知っています。しかし、とにかくそれをする必要があります。 CSSとJSのどちらを使用する必要があるかは問題ではありません。私が主にしようとしているのは、強調表示された要素に与えられている青色の除去です。

javascripthtmlcsshighlight
24
John Stimac

Firefoxでは、CSS疑似クラスセレクタ::selectionおよび::-moz-selectionを使用できます。

例えば：

::-moz-selection {
    background-color: transparent;
    color: #000;
}

::selection {
    background-color: transparent;
    color: #000;
}

.myclass::-moz-selection,
.myclass::selection { ... }
22
Erv

CSS3ソリューション：

user-select: none;
-moz-user-select: none;

ユーザー選択用のWebkitプレフィックスもありますが、一部のフォームフィールドにフォーカスできなくなります（一時的なバグである可能性があります）。代わりに、次のWebkitの疑似クラスを使用できます。

element::selection
10
mystrdat

私はあなたが意味することはテキストを選択することだと信じています（例えば、マウスをドラッグしてハイライトします）。その場合、IEおよびMozillaでの選択アクションがキャンセルされます。

window.onload = function() {
  if(document.all) {
      document.onselectstart = handleSelectAttempt;
  }
  document.onmousedown = handleSelectAttempt;
}

function handleSelectAttempt(e) {
    var sender = e && e.target || window.event.srcElement;
    if(isInForm(sender)) {
        if (window.event) {
            event.returnValue = false;
        }
        return false;
    }
    if (window.event) {
        event.returnValue = true;
    }
    return true;
}

function isInForm = function(element) {
    while (element.parentNode) {
        if (element.nodeName.ToUpperCase() == 'INPUT'
            || element.nodeName.ToUpperCase() == 'TEXTAREA') {
            return true;
        }
        if (!searchFor.parentNode) {
            return false;
        }
        searchFor = searchFor.parentNode;
    }
    return false;
}
5
Rex M

：focus疑似クラスを探していると思います。これを試して：

input:focus {
  background-color: #f0f;
}

選択すると、入力にかなりの紫/ピンク色が与えられます。

どのプロパティを設定（解除）する必要があるのか​​はわかりませんが、試行錯誤することで確認できます。

また、強調表示または非表示はブラウザ固有であることにも注意してください。

0
Erik van Brakel

マウスをドラッグすると、テキストが強調表示されますか？

これを行う最良の方法は、:: selectionと呼ばれるCSS3プロパティを使用することですが、CSS3であるため、まだ十分にサポートされていません。先に進んで調べてください。そうでなければ、JavaScriptでそれを行う方法があるかもしれません。

0
Karl

最終的な目標がテキストのコピーアンドペーストをより困難にすることである場合、ブラウザのソース表示機能を無効にできないため、JavaScriptとCSSは適切なテクノロジーではありません。

他のいくつかのアイデア（理想的なものはありません）：

  • a Javaアプレット（テキストの表示と取得の両方を制御します）
  • 別のブラウザープラグイン（Flash、Silverlightなど）でも同じ
  • サーバー側で作成された画像（パフォーマンスが悪い）
0
Josef Pfleger