web-dev-qa-db-ja.com

.disableSelection（）が推奨されないのはなぜですか？

JQueryUI 1.9の.disableSelectionは非推奨です。私が見つけることができる唯一の説明は、文字通り "テキストの選択を無効にするのは悪いことです。これを使用しないでください。" および "開発者がテキストの選択を混乱させることはできません。これはもともとはインタラクションプラグイン用でしたが、現時点ではすべてテキスト選択を適切に処理しています。 "

代替案は提案されていないので、それは常に悪いことを意味すると思いますが、私はそれらの理由を理解することはできません。ダブル/トリプルクリックなど、意味のない精巧なUIアプリケーションの選択は、テキストハイライト効果を不適切に適用し、（私にとって）堅牢なユーザーエクスペリエンスの錯覚を即座に取り除きます。

デスクトップアプリケーションはこれに悩まされません！デスクトップ環境のボタンやその他のコントロールは、ピクセルの領域であり、何をしようとしても（または壊れていても）、しっかりと見え、直感的に動作します。 Webアプリケーションが複雑なHTMLボックス、背景、境界線、および画像（ピクセルのWebアナログ）で構成されているという事実は、操作する画面要素が原子的で物理的なオブジェクトではないという幻想を裏切る理由にはなりません。

下の画像では、おそらく、アプリケーションデータである可能性のあるパネル内のテキストの段落など、一部のテキストが選択可能である必要があります。ただし、一部のアプリケーションでは、ボタン、タブ、アコーディオンヘッダー内のテキスト、モーダルダイアログの背後にあるテキストなど、他の部分を選択できないようにするのが妥当な設計選択です。これは特にドラッグ/ソート可能な動作に適用されます。

jQuery UI Themeroller, with a region selected

1）私は彼らの決定を誤解していますか？推奨事項は私が認識しているよりもJQueryに固有のものですか？

2）テキストがalwaysをこのように選択できるようにする必要があるという一般的な意図がある場合は、その理由を詳しく説明してください。

3）とにかくそれを行うつもりなら、disableSelectionが廃止されたので、それを実行するために最もパフォーマンスが高く、完全で、うやうやしく、クロスブラウザで、普遍的にアクセスできるものは何ですか？

jquery-uitextselection
41
Jason Kleban

CSSを使用して、ほとんどのブラウザーでこれを実現できます。 http://jsfiddle.net/fQthQ/

* {
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.selectable {
   -ms-user-select: auto;
   -moz-user-select: auto;
   -khtml-user-select: auto;
   -webkit-user-select: auto;
   user-select: auto;
}

Operaは現在この機能をサポートしていません。

詳細についてはMDNページを参照してください： https://developer.mozilla.org/en-US/docs/CSS/user-select

29
Shmiddty

テキスト選択を無効にすることが役立つ実際のケースは<ul>要素の<li>はドラッグ可能（ソート用）にプログラムされています。ユーザーがドラッグしている間にテキストが選択されることを除いて、ドラッグは正しく機能します。確かに、これはdisableSelection（）の正当な使用法です。

この方法がなくても実行できることを知っています（そうしないと、最初にこの方法でそれを実行することは不可能です）。しかし、disableSelection（）を使用したかった理由は、単一の場所で自分の欲求を簡潔に表現し、複数のCSSルールといくつかのJS（IE7の場合）の組み合わせを使用するのではなく、jQuery-UIにブラウザー間の互換性の問題を処理させるためです。 。

誰かが選択を無効にするWebサイトに悩まされたため、この機能は非推奨であると私は信じており、これは推奨すべき慣行ではないと判断しました。これは、人気のあるレガシーブラウザーの使用を奨励したくないためにサポートを拒否するWebプログラマーに似ています。そのようなプログラマーは解雇されますが、人気のあるライブラリーに権力を持っている場合、哲学を他の人に課すことで逃げることができます。この機能を非推奨にすると、選択を無効にしたいプログラマが別の方法を探すために時間を浪費することになります。悪党を罰することにより、jQuery-UIは恐らく彼らに彼らのやり方を変えさせ、私たちの社会は選択を無効にするウェブサイトで溢れることはないでしょう。ご覧のとおり、完全に適切な合理化があり、「テキストの選択を無効にすることは悪いことです。これを使用しないでください」と書いた人は誰でもいます。公式ドキュメントでは英雄的と見なすことができます。私たちはここの悪者です。

5
Vladimir Kornea

CSSの_user-select: none;_手法の代替として、$(document).on('dblclick mousedown', '.prevent-select', false);を使用してダブルクリックおよびマウスダウンでのデフォルトの動作を単に防止することには、いくつかの利点があると思います。

  1. ユーザーがカーソルをドラッグしたい場合でも、テキストを選択できますaround要素。ユーザーがすばやくクリックしたときに迷惑なテキスト選択を防ぐだけです。
  2. より良いブラウザのサポート。
  3. JQueryチームでは非推奨ではありません（コードレビューに邪魔はありません）。
0
Jordan Rieger

@WesleyMurchにこれ以上同意することはできませんでした。+ 1を増やしたいと思います:)また、JSの方が先ではなく、CSSがこれに適しているかもしれません...、

トグルする選択が必要な場合（動的な場合もあります）、jqueryを使用してクラスを切り替えることができます（古いIEブラウザ）。

まあそれは、OLD I.E.彼らが見逃しているもののために。

http://caniuse.com/#search=user-select

（IE 8/9 [パーセンテージでのユーザー数から]は大きな数字ですが、本当に気にかけている量によって異なります）

@Shmiddtyが説明しているように、CSSオプションを使用しますが、最初は有効にして、先に進むにつれて無効にしますが、それは私の意見です:)

0
Val