отключить выделение текста при нажатии клавиши «Shift»

Question

Я реализую функциональность выбора элементов в javascript (используя jQuery). item - это li, содержащий html.
пользователь может щелкнуть по одному элементу (сделать его выделенным), а затем щелкнуть по другому элементу, удерживая нажатой клавишу Shift, чтобы выбрать все промежуточные элементы. это в основном работает хорошо, однако нажатие клавиши Shift также выделяет (выделяет) текст, который появляется внутри элементов (основная функциональность браузера для нажатий клавиши Shift). есть ли способ отключить это?

Answer 1

Попробуйте комбинировать 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) */
}

Answer 2

Попробуйте после нажатия Shift + ...

document.getSelection().removeAllRanges();

Если это недостаточно эффективно, вам, возможно, придется отменить событие onselectstart ...

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

Answer 3

У меня есть такое приложение. Хитрость в том, что я хотел разрешить выделение, но я также хотел щелкать по 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);
        }
    }
});

Answer 4

Если у вас есть флажки в строках таблицы (элементы), вы можете просто установить фокус на флажок для строки, как только вы сделали выбор. Сосредоточив внимание на флажке следует избавиться от выбора браузера. Вы также можете сосредоточиться на текстовом поле или другом элементе формы. Для 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();
  }
});

Answer 5

Этот код остановит выделение текста только при нажатой клавише «Shift». Если вы отпустите его, вы можете выбрать текст как обычно. В настоящее время я использую этот код ES6.

["keyup","keydown"].forEach((event) => {
    window.addEventListener(event, (e) => {
        document.onselectstart = function() {
            return !(e.key == "Shift" && e.shiftKey);
        }
    });
});