Existe-t-il une fonction pour désélectionner tout le texte en utilisant JavaScript?

98

Existe-t-il une fonction en javascript pour simplement désélectionner tout le texte sélectionné? Je pense que ce doit être une simple fonction globale comme document.body.deselectAll();ou quelque chose comme ça.

javascript selection NoodleOfDeath
la source

Réponses:

163

Essaye ça:

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

Cela effacera une sélection dans le contenu HTML normal dans n'importe quel navigateur principal. Cela n'effacera pas une sélection dans une entrée de texte ou <textarea>dans Firefox.

Ankur
la source
25
Je peux confirmer que cela window.getSelection().removeAllRanges();fonctionne dans tous les navigateurs actuels. Démo en direct: jsfiddle.net/hWMJT/1
Šime Vidas
vous devez cliquer sur un bouton comme <input id = 'mais' type = 'button' value = 'click' / onclick = 'clearSelection ()'>
Ankur
1
@ Šime - pas vraiment. Cela "fonctionne" parce que la sélection est perdue lorsque le bouton obtient le focus. Preuve - le code est commenté, la sélection est toujours effacée.
Shadow Wizard est une oreille pour vous le
@Shadow Voici la démo appropriée: jsfiddle.net/9spL8/3 La removeAllRanges()méthode fonctionne dans tous les navigateurs actuels pour le texte à l'intérieur des paragraphes ou des éléments similaires sans champ de formulaire. Pour les champs de formulaire (comme textarea), cette méthode ne fonctionne pas dans IE9 et FF5.
Šime Vidas
1
Modifié, utilisez d' window.getSelection().removeAllRanges(); abord car il est conforme aux normes, le code propriétaire doit toujours être exécuté en dernier . Que ce soit l'année 2004 ou le code conforme aux normes 4004 sera toujours ce que nous utilisons, alors détectez-le d'abord sans exception!
John
27

Voici une version qui effacera toute sélection, y compris dans les entrées de texte et les zones de texte:

Démo: 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
la source
ne fonctionne pas si votre sélection commence quelque part à partir de la première ligne et inclut le champ de texte plus grand
Vyachaslav Gerchicov
1
@VyachaslavGerchicov: C'est probablement parce que c'est un exemple simple et rapide et si vous terminez la sélection en dehors de la principale, <div>l' mouseupévénement ne se déclenche pas. Mettez le gestionnaire de souris sur le document à la place et ce serait bien: jsfiddle.net/SLQpM/23
Tim Down
C'est un excellent moyen de contourner les anciens navigateurs qui ne prennent pas en charge les CSS sélectionnés par l'utilisateur lors du déplacement d'éléments. Appelez clearSelection () dans le rappel de déplacement de la souris.
Geordie
6

Pour Internet Explorer, vous pouvez utiliser la méthode vide de l'objet document.selection:

document.selection.empty ();

Pour une solution multi-navigateurs, consultez cette réponse:

Effacer une sélection dans Firefox

Luke Girvin
la source
Si votre site Web est public (pas un intranet où vous contrôlez les navigateurs), ce n'est pas une bonne idée, ce n'est pas un navigateur croisé.
Shadow Wizard est une oreille pour vous le
1
@Shadow Wizard - vrai, cette question peut être pertinente pour une solution multi-navigateurs: stackoverflow.com/questions/6186844/…
Luke Girvin
@Luke sympa, dommage qu'un autre site Web ne soit (probablement) pas cohérent entre les différents navigateurs car l'OP a pris ce que vous avez donné tel quel.
Shadow Wizard est une oreille pour vous le
À mon avis, la compatibilité des navigateurs est quelque chose d'évident que nous devrions offrir - de nombreux développeurs ne sont même pas conscients de l'existence de telles différences, donc ceux qui le savent devraient leur dire. Cela mis à part, je n'ai jamais dit que votre question était fausse , juste manquante .
Shadow Wizard est une oreille pour vous le
@Luke nedocument.selection.clear() fonctionne que dans IE. Voir ici: jsfiddle.net/9spL8/4 De plus, cette méthode supprimera le texte sélectionné, pas seulement le désélectionnera. Pour désélectionner simplement le texte, utilisez à la document.selection.empty()place.
Šime Vidas
0

Pour un textareaélément avec au moins 10 caractères, ce qui suit fera une petite sélection, puis après une seconde et demie, le désélectionnera:

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

setTimeout(function()
{
 t.selectionStart = 4;
 t.selectionEnd = 4;
},1500);
John
la source