Sélectionnez tous les DIV du texte avec un seul clic de souris

Question

Comment mettre en évidence/sélectionner le contenu d'une balise DIV lorsque l'utilisateur clique sur le DIV...l'idée est que tout le texte est mis en surbrillance/sélectionné, de sorte que l'utilisateur n'a pas besoin d'manuellement sélectionner le texte avec la souris et potentiellement manquer un peu de ce texte?

Par exemple, disons que nous avons un DIV comme ci-dessous:

<div id="selectable">http://example.com/page.htm</div>

...et lorsque l'utilisateur clique sur l'un de l'URL de la totalité de l'URL du texte est mis en évidence, de sorte qu'ils peuvent facilement faire glisser le texte sélectionné le navigateur, ou copiez l'URL complète avec un clic droit.

Merci!

Answer 1

<script type="text/javascript">
    function selectText(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
        }
    }
</script>

<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

Maintenant, vous devez passer l'ID comme un argument, qui dans ce cas est "sélectionnable", mais c'est plus globale, vous permettant de l'utiliser n'importe où à plusieurs reprises sans utilisation, comme chiborg mentionné, jQuery.

Answer 2

Tous les exemples ci-dessus utilisent:

    var range = document.createRange();
    range.selectNode( ... );

mais le problème est que l'on sélectionne le Nœud lui-même, y compris la balise DIV, etc.

Pour sélectionner le Nœud de texte comme par l'OP question que vous avez besoin de faire appel à la place:

    range.selectNodeContents( ... )

L'extrait de code serait:

    function selectText( containerid ) {

        var node = document.getElementById( containerid );

        if ( document.selection ) {
            var range = document.body.createTextRange();
            range.moveToElementText( node  );
            range.select();
        } else if ( window.getSelection ) {
            var range = document.createRange();
            range.selectNodeContents( node );
            window.getSelection().removeAllRanges();
            window.getSelection().addRange( range );
        }
    }

Answer 3

La réponse de Neuroxik a été vraiment utile. J'ai seulement eu un soucis avec google Chrome, parce que quand j'ai cliqué sur une div, Il n'a pas de travail. J'ai pu le résoudre en supprimant les anciennes gammes avant d'ajouter la nouvelle gamme:

function selectText(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection()) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

Answer 4

À l'aide d'un champ zone de texte, vous pouvez utiliser ceci: (Via Google)

<form name="select_all">

    <textarea name="text_area" rows="10" cols="80" 
    onClick="javascript:this.form.text_area.focus();this.form.text_area.select();">

    Text Goes Here 

    </textarea>
</form>

C'est ainsi que je vois la plupart des sites web faire. Ils ont juste style avec CSS, donc il ne ressemble pas à un textarea.

Answer 5

Ce modèle offre toutes les fonctionnalités dont vous avez besoin. Ce que vous devez faire est d'ajouter un événement pour que la div qui qui active fnSelect. Un rapide hack que vous ne devriez pas faire et pourraient éventuellement ne pas fonctionner, ressemble à ceci:

document.getElementById("selectable").onclick(function(){
    fnSelect("selectable");
});

Évidemment, en supposant que le liés à l'extrait a été inclus.