4

input [type=text]要素を除くすべてのWebページでの選択を無効にする必要があります。

同様の質問に対するこの受け入れられた答えはほとんどトリックを行いますが、input [type=text]要素を含むコンテナーの選択を無効にすることはありません。したがって、ユーザーはこれらのコンテナの1つからドラッグ操作を開始することで選択できます。

これも可能ですか。つまり、子要素（具体的には、子input = text要素）に対して有効にしながら、コンテナ要素の選択を無効にすることは可能ですか。

@Pointy、「最初の.not（）呼び出しを削除してみませんか？」

最初の電話に出ると、次の.notようになります。

$('body').not('input').disableSelection();

リンクされた質問で指摘されているように、input [type=text]要素を含むページ上のすべてが引き続き無効になります。

@David Thomas、「ライブデモはありますか...」

ライブデモはありませんが、かなり些細なことです。たとえば、input [type=text]要素を含む少しのパディングがあるdiv。結果は次のとおりです。

  • selectiopnを使用$('body').not('input').disableSelection();すると、入力要素を含むすべてのページで無効になります。

  • $('body *').not(':has(input)').not('input').disableSelection();入力要素を含まないすべての要素に対して、選択が無効になっています。ただし、入力要素を含むコンテナ内からドラッグ操作を開始することにより、ページ全体を選択することは可能です。

4

3 に答える 3

1

私は自分がやりたいことをしているように見える解決策を見つけました。jquery/javascriptの専門家からのコメント/改善に興味があります。

$(document).ready(function () {
    $("body").disableSelection();

    $("body").delegate('input[type=text],textarea', "focus", function () {
        $("body").enableSelection();
    });

    $("body").delegate("input[type=text],textarea", "blur", function () {
        $("body").disableSelection();
    });
});

テキストボックス（input [type = text]またはtextarea）にフォーカスがある場合、マウスでドラッグすると、テキストボックス内のテキストのみが選択されます。したがって、テキストボックスにフォーカスがある間（フォーカスイベントとブラーイベントの間）にページ全体を選択できるようにするのは「安全」です。

IE8 / 9でテキストボックス間をタブ移動すると、顕著な遅延が発生します。Google Chromeでは目立ちませんが、JavaScriptエンジンが高速であると私は理解しています。そのため、特にIE10にはより高速なjavascriptエンジンが搭載されるため、パフォーマンスの低下に耐えることができます。

アップデート

ASP.NETを使用する場合UpdatePanelは、部分的なポストバックごとに選択を無効にするように変更する必要があります。

Sys.Application.add_load(function () {
    $("body").disableSelection();
});
于 2012-07-04T15:02:31.467 に答える
1

さて、サスペンダーを締めて、本当に汚いハックの準備をしてください。

免責事項：

これは物事を行うのに良い方法ではないと思います。OPの目的の機能を取得するという課題に取り組みたかっただけです。他の誰かがこれをよりクリーンな方法で機能させることができる場合は、投稿してください。

関数を試してdisableSelection()みたところ、親要素が無効になっていると、その子もすべて選択できなくなったようです（間違っている場合は修正してください）。したがって、小さな部分を除いてすべてを選択不可にしたい場合は、すべてのマークアップを1つの選択不可に配置し、絶対位置を使用して、選択可能なタグ（または実際には任意のタグ）<div>の選択可能なクローンを選択不可能なものの上に配置できると判断しました。 <input>。これらのクローンは、<div>無効にされていない1秒以内に存在します。

このアイデアの例を次に示します：http：//jsfiddle.net/pnCxE/2/。

欠点：

  • スタイリングは大きな頭痛の種になります。親のスタイル（つまり、位置、サイズ、色など）に依存する要素は、クローンが別の場所にあるため、クローンを作成できません。
  • （再び）クローンがクローン要素と同じ場所にないため、フォームの管理がはるかに困難になります。
  • クローンは複製された要素と同じIDを持つため、名前の衝突に対処する必要があります。（それは実行可能です。おそらくこのアイデアを使用する人は特に注意を払う必要があるので、コーディングしたくありませんでした）

したがって、選択可能な制限を回避することはできますが、コンテナの選択を受け入れる方がよい場合があります。このコードを実稼働環境に配置する前に、私は長く懸命に考えます。

于 2012-07-03T22:32:05.033 に答える
0

これを試してください。ただし、すでに使用しているものと同じです。

$('* :not(input)').disableSelection();

なぜbody要素全体を使用し、テキストノード（p、h [..]、ul、olなど）に絞り込まない必要があるのか​​わかりません。

そして、私は@DavidThomasに同意します-作業中のテストページが見やすくなります。

于 2012-07-03T21:16:33.210 に答える