Есть ли функция для отмены выделения всего текста с помощью JavaScript?

100

Есть ли в javascript функция для отмены выделения всего выделенного текста? Я полагаю, это должна быть простая глобальная функция, вроде как document.body.deselectAll();.

javascript selection Лапша Смерти
источник

Ответы:

166

Попробуй это:

function clearSelection()
{
 if (window.getSelection) {window.getSelection().removeAllRanges();}
 else if (document.selection) {document.selection.empty();}
}

Это очистит выделение в обычном HTML-содержимом в любом крупном браузере. Он не очистит выделение во вводе текста или <textarea>в Firefox.

Анкур
источник
25
Я могу подтвердить, что window.getSelection().removeAllRanges();работает во всех текущих браузерах. Живая демонстрация: jsfiddle.net/hWMJT/1
Шиме Видас
вам нужно нажать кнопку вроде <input id = 'but' type = 'button' value = 'click' / onclick = 'clearSelection ()'>
Ankur
1
@ Шимэ - не совсем. Это "работает", потому что выбор теряется, когда кнопка получает фокус. Proof - код прокомментирован, выделение снято.
Shadow Wizard - Ear For You
@Shadow Вот собственно демо: jsfiddle.net/9spL8/3removeAllRanges() метод работает во всех современных браузерах для текста внутри абзацев или подобных элементов без формы поля. Для полей формы (например, textarea) этот метод не работает в IE9 и FF5.
Шиме Видас
1
Отредактированный, использовать window.getSelection().removeAllRanges(); первым, потому что соответствующий стандартам проприетарный код всегда должен выполняться последним . Будь то код, соответствующий стандартам 2004 года или 4004, в конечном итоге всегда будет тем, чем мы пользуемся, поэтому сначала определите его без исключения!
Джон
27

Вот версия, которая очистит любой выбор, в том числе в текстовых полях и текстовых областях:

Демо: http://jsfiddle.net/SLQpM/23/

function clearSelection() {
    var sel;
    if ( (sel = document.selection) && sel.empty ) {
        sel.empty();
    } else {
        if (window.getSelection) {
            window.getSelection().removeAllRanges();
        }
        var activeEl = document.activeElement;
        if (activeEl) {
            var tagName = activeEl.nodeName.toLowerCase();
            if ( tagName == "textarea" ||
                    (tagName == "input" && activeEl.type == "text") ) {
                // Collapse the selection to the end
                activeEl.selectionStart = activeEl.selectionEnd;
            }
        }
    }
}
Тим Даун
источник
не работает, если ваш выбор начинается где-то с первой строки и включает текстовое поле большего размера
Вячеслав Герчиков
1
@VyachaslavGerchicov: Это, вероятно , потому , что это быстро сделали простой пример , и если вы заканчиваете выбор за пределами основного , <div>то mouseupсобытие не срабатывает. Вместо этого поместите обработчик mouseup в документ, и все будет хорошо: jsfiddle.net/SLQpM/23
Tim Down
Это отличный способ обхода старых браузеров, которые не поддерживают CSS, выбираемый пользователем, при перетаскивании элементов. Вызовите clearSelection () в обратном вызове перемещения мыши.
Джорди
6

Для Internet Explorer вы можете использовать пустой метод объекта document.selection:

document.selection.empty ();

Для кросс-браузерного решения см. Этот ответ:

Очистить выделение в Firefox

Люк Гирвин
источник
Если ваш веб-сайт является общедоступным (не в интрасети, где вы управляете браузерами), это не лучшая идея, это не кроссбраузерность.
Shadow Wizard - Ear For You
1
@Shadow Wizard - правда, этот вопрос может иметь отношение к кроссбраузерному решению: stackoverflow.com/questions/6186844/…
Люк Гирвин
@Luke, хорошо, очень плохо, что другой веб-сайт будет (вероятно) несовместимым для разных браузеров, поскольку OP взял то, что вы дали, как есть.
Shadow Wizard - Ear For You
На мой взгляд, совместимость с браузерами - это то, что мы должны предложить, - многие разработчики даже не подозревают о существовании таких различий, поэтому те, кто знает, должны им сообщить. Помимо этого, я никогда не говорил, что ваш вопрос неправильный , просто отсутствует .
Shadow Wizard is Ear For You
@Luke document.selection.clear()работает только в IE. См. Здесь: jsfiddle.net/9spL8/4 Кроме того, этот метод удалит выделенный текст, а не просто отменит его выбор. Чтобы просто отменить выделение текста, используйте document.selection.empty()вместо него.
Шиме Видас
0

Для textareaэлемента, содержащего не менее 10 символов, следующий элемент сделает небольшой выбор, а затем через полторы секунды отменит выбор:

var t = document.getElementById('textarea_element');
t.focus();
t.selectionStart = 4;
t.selectionEnd = 8;

setTimeout(function()
{
 t.selectionStart = 4;
 t.selectionEnd = 4;
},1500);
Джон
источник