Чи існує функція скасування виділення всього тексту за допомогою JavaScript?


98

Чи є у javascript функція просто скасувати вибір усього виділеного тексту? Я думаю, це повинна бути проста глобальна функція, подібна document.body.deselectAll();чи щось подібне.

Відповіді:


163

Спробуйте це:

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
@ Шіме - не дуже. Це "працює", оскільки виділення втрачається, коли кнопка фокусується. Доказ - код коментується, вибір все ще очищений.
Майстер тіней - вухо для вас

@Shadow Ось власне демо: jsfiddle.net/9spL8/3removeAllRanges() метод працює у всіх сучасних браузерах для тексту всередині абзаців або подібних елементів без форми поля. Для полів форми (наприклад, textarea) цей метод не працює в IE9 та FF5.
Šime Vidas

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подія не запускається. Помістіть натомість обробник миші на документ, і це буде добре: jsfiddle.net/SLQpM/23
Tim Down

Це чудова робота в старих браузерах, які не підтримують CSS, який вибирає користувач, під час перетягування елементів навколо. Виклик clearSelection () при зворотному виклику переміщення миші.
Geordie

6

Для Internet Explorer можна використовувати порожній метод об’єкта document.selection:

document.selection.empty ();

Рішення щодо крос-браузерного пошуку див. У цій відповіді:

Очистити виділення у Firefox


Якщо ваш веб-сайт загальнодоступний (а не інтранет, де ви керуєте браузерами), це не гарна ідея, це не перехресний браузер.
Майстер тіней - вухо для вас

1
@Shadow Wizard - правда, це питання може бути актуальним для вирішення крос-браузер: stackoverflow.com/questions/6186844 / ...
Лука Гирвіна

@Luke, приємно, шкода, що інший веб-сайт буде (мабуть) несумісним серед різних браузерів, оскільки OP сприймає те, що ви дали, як є.
Майстер тіней - вухо для вас

На мою думку, сумісність браузерів є чимось очевидним, що слід пропонувати нам - багато розробників навіть не підозрюють, що існують такі відмінності, тому ті, хто знає, повинні сказати їм. Окрім цього, я ніколи не казав, що ваше запитання хибне , просто відсутнє .
Майстер тіней - вухо для вас

@Luke document.selection.clear()працює лише в IE. Дивіться тут: jsfiddle.net/9spL8/4 Крім того, цей метод видалить виділений текст, а не просто скасує його вибір. Щоб просто скасувати вибір тексту, використовуйте document.selection.empty()замість нього.
Šime Vidas

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);

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.