¿Existe una función para anular la selección de todo el texto que usa JavaScript?

98

¿Existe una función en javascript para deseleccionar todo el texto seleccionado? Supongo que tiene que ser una función global simple como document.body.deselectAll();o algo así.

javascript selection NoodleOfDeath
fuente

Respuestas:

163

Prueba esto:

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

Esto borrará una selección en el contenido HTML normal en cualquier navegador principal. No borrará una selección en una entrada de texto o <textarea>en Firefox.

Ankur
fuente
25
Puedo confirmar que window.getSelection().removeAllRanges();funciona en todos los navegadores actuales. Demostración en vivo: jsfiddle.net/hWMJT/1
Šime Vidas
tienes que hacer clic en un botón como <input id = 'pero' type = 'button' value = 'click' / onclick = 'clearSelection ()'>
Ankur
1
@ Šime - en realidad no. Está "funcionando" porque la selección se pierde cuando el botón se enfoca. Prueba : se comenta el código, la selección aún se borra.
Shadow Wizard te
@Shadow Aquí está la demostración adecuada: jsfiddle.net/9spL8/3 El removeAllRanges()método funciona en todos los navegadores actuales para texto dentro de párrafos o elementos similares que no son campos de formulario. Para campos de formulario (como textarea), este método no funciona en IE9 y FF5.
Šime Vidas
1
Editado, use window.getSelection().removeAllRanges(); primero porque es compatible con los estándares, el código propietario siempre debe ejecutarse en último lugar . Ya sea en el año 2004 o en el año 4004, el código que cumple con los estándares siempre será lo que usamos en última instancia, ¡así que detectelo primero sin excepción!
John
27

Aquí hay una versión que borrará cualquier selección, incluso dentro de las entradas de texto y las áreas de texto:

Demostración: 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;
            }
        }
    }
}
Tim Down
fuente
no funciona si su selección comienza en algún lugar de la primera línea e incluye el campo de texto más grande
Vyachaslav Gerchicov
1
@VyachaslavGerchicov: Probablemente se deba a que es un ejemplo simple hecho rápidamente y si finaliza la selección fuera de la principal <div>, el mouseupevento no se activa. En su lugar, coloque el controlador del mouseup en el documento y estaría bien: jsfiddle.net/SLQpM/23
Tim Down
Esta es una excelente solución en los navegadores más antiguos que no admiten CSS seleccionado por el usuario al arrastrar elementos. Llame a clearSelection () en la devolución de llamada de movimiento del mouse.
Geordie
6

Para Internet Explorer, puede utilizar el método vacío del objeto document.selection:

document.selection.empty ();

Para una solución de varios navegadores, consulte esta respuesta:

Borrar una selección en Firefox

Luke Girvin
fuente
Si su sitio web es público (no una intranet donde usted controla los navegadores) no es una buena idea, no es un navegador cruzado.
Shadow Wizard es Ear For You
1
@Shadow Wizard: es cierto, esta pregunta puede ser relevante para una solución entre navegadores: stackoverflow.com/questions/6186844/…
Luke Girvin
@Luke agradable, lástima que otro sitio web (probablemente) no sea coherente entre los diferentes navegadores, ya que el OP tomó lo que dio tal como está.
Shadow Wizard es Ear For You
En mi opinión, la compatibilidad del navegador es algo obvio que deberíamos ofrecer; muchos desarrolladores ni siquiera son conscientes de que existen tales diferencias, por lo que aquellos que saben deberían decírselo. Aparte de esto, nunca dije que tu pregunta estuviera equivocada , solo faltaba .
Shadow Wizard es Ear For You
@Luke solodocument.selection.clear() funciona en IE. Vea aquí: jsfiddle.net/9spL8/4 Además, este método eliminará el texto seleccionado, no solo lo deseleccionará. Para anular la selección del texto, utilice en su lugar. document.selection.empty()
Šime Vidas
0

Para un textareaelemento con al menos 10 caracteres, lo siguiente hará una pequeña selección y luego, después de un segundo y medio, lo deseleccionará:

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

setTimeout(function()
{
 t.selectionStart = 4;
 t.selectionEnd = 4;
},1500);
Juan
fuente