tắt chọn văn bản trong khi nhấn 'shift'

Question

Tôi đang triển khai chức năng chọn mục trong javascript (sử dụng jQuery). mục là một li chứa một số html.
người dùng có thể nhấp vào một mục (làm cho nó được chọn) và sau đó bấm shift trên một mục khác để chọn tất cả các mục ở giữa. điều này về cơ bản hoạt động OK, tuy nhiên, shift-click cũng chọn (higtlights) văn bản xuất hiện bên trong các mục (chức năng trình duyệt cơ bản cho các nhấp chuột thay đổi). có cách nào vô hiệu hóa thứ đó không?

Answer 1

Hãy thử một combo JavaScript và css để ngăn chặn lựa chọn ở địa điểm đầu tiên:

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

css (dành cho trình duyệt không phải 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) */ 
} 

Answer 2

Hãy thử điều này sau khi tổ hợp phím Shift + bấm ...

document.getSelection().removeAllRanges(); 

Nếu đó là không đủ hiệu quả, bạn có thể có cũng phải hủy bỏ sự kiện onselectstart ...

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

Answer 3

Tôi có một ứng dụng như thế. Thủ thuật là, tôi muốn cho phép lựa chọn, nhưng tôi cũng muốn nhấn Ctrl-click và Shift-click để chọn các mục.

gì tôi thấy được rằng tất cả mọi người nhưng IE cho phép bạn để đánh bại này bằng cách hủy sự kiện mousedown, và trong IE gì làm việc tốt nhất là để tạm thời vô hiệu hóa 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); 
     } 
    } 
}); 

Answer 4

Nếu bạn có hộp kiểm trong hàng bảng của bạn (mục), bạn có thể chỉ cần đặt tiêu điểm vào hộp kiểm cho hàng sau khi bạn đã thực hiện lựa chọn. Tập trung vào hộp kiểm sẽ loại bỏ lựa chọn trình duyệt. Bạn cũng có thể tập trung vào một hộp văn bản hoặc phần tử biểu mẫu khác. Đối với JQuery,

$('tr').bind('click', function(e) { 
    // If shift key was down when the row was clicked 
    if (e.shiftKey) { 
    // Make the row selected 
    $(this).parent().children().slice($(last).index(), $(this).index()+1).addClass('selected').find('input:checkbox').attr('checked', true); 

    // Now focus on the checkbox within the row 
    $('input:checkbox', $(this)).focus(); 
    } 
});