2009-10-06 33 views
29

私はjavascript(jQueryを使用)でアイテム選択機能を実装しています。 アイテムは、いくつかのhtmlを含むliです。
ユーザーは1つのアイテムをクリックして(選択する)、別のアイテムをShiftキーを押しながらクリックして、間にあるすべてのアイテムを選択できます。これは基本的にOKですが、shift-clickは項目内に表示されるテキスト(シフトクリックの基本的なブラウザ機能)も選択します(ハイライト)。これを無効にする方法はありますか?'shift'を押しながらテキスト選択を無効にする

答えて

35

...それは十分に効果的ではない場合、あなたはまた、onselectstartイベントをキャンセルする必要がある場合があります

document.getSelection().removeAllRanges(); 

... Shiftキー+クリックした後、これを試してみてください最初の場所での選択を防止するためにJavaScriptとCSSを使用してください:

$('li').attr('unselectable', 'on'); // IE 

css(ブラウザではIE用):

li { 
      user-select: none; /* CSS3 (little to no support) */ 
     -ms-user-select: none; /* IE 10+ */ 
     -moz-user-select: none; /* Gecko (Firefox) */ 
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */ 
} 
+0

unselectable = "on"はすべての子ノード(div、pなど)にある必要があることに注意してください。チェックボックスウィジェットであってもシフトキーでクリックすることができます。 –

+0

これは「シフトを押している間」の部分には対処していません。それについては@Anthony Millsの答えを見てください。 – ahlexander

26

コンボを試してみてください

window.onload = function() { 
    document.onselectstart = function() { 
    return false; 
    } 
} 
+1

+1です。 –

18

私はそのようなアプリケーションを持っています。私は選択を許可したいと思っていましたが、項目を選択するにはCtrl +クリックとShift-クリックが必要でした。私が見つけた何

であることが確認された誰もが、IEを使用すると、mouseDownイベントをキャンセルすることによってこれを倒すことができますし、IEで何が最も効果的に機能を一時的onselectstart無効にすることです:あなたは、テーブルの行のチェックボックスを持っている場合は

$("#id").mousedown(function (e) { 
    if (e.ctrlKey || e.shiftKey) { 
     // For non-IE browsers 
     e.preventDefault(); 

     // For IE 
     if ($.browser.msie) { 
      this.onselectstart = function() { return false; }; 
      var me = this; // capture in a closure 
      window.setTimeout(function() { me.onselectstart = null; }, 0); 
     } 
    } 
}); 
+2

これは私が探していた秘密でした。 Chromeで選択の瞬間的なフラッシュを取得し、Safariで 'document.getSelection()。removeAllRanges();'を追加する必要もありました。 – prototype

5

(項目)を選択した後は、選択した行のチェックボックスにフォーカスを設定することができます。チェックボックスに注目すると、ブラウザの選択を取り除く必要があります。テキストボックスや他のフォーム要素にも焦点を当てることができます。 JQueryの場合、onselectstartをキャンセルするために、JQueryの場合、

関連する問題