javascript - ejemplo - eventos en html5

Seleccione todo el texto DIV con un solo clic del mouse

Question

Cómo resaltar / seleccionar los contenidos de una etiqueta DIV cuando el usuario hace clic en el DIV ... la idea es que todo el texto esté resaltado / seleccionado para que el usuario no tenga que resaltar manualmente el texto con el mouse y potencialmente perder un poco del texto?

Por ejemplo, digamos que tenemos un DIV como el siguiente:

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

... y cuando el usuario hace clic en cualquiera de esa URL, se resalta todo el texto de la URL para que pueda arrastrar fácilmente el texto seleccionado en el navegador o copiar la URL completa con un clic derecho.

¡Gracias!

Answer 1

ACTUALIZACIÓN 2017:

Para seleccionar el contenido del nodo, llame a:

window.getSelection().selectAllChildren( document.getElementById( id ) );

Esto funciona en todos los navegadores modernos, incluido IE9 + (en modo estándar).

La respuesta original siguiente está obsoleta desde window.getSelection().addRange( range ); ha sido desaprobado

Respuesta Original:

Todos los ejemplos anteriores usan:

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

pero el problema con eso es que selecciona el Nodo en sí mismo, incluida la etiqueta DIV, etc.

Para seleccionar el texto del Nodo según la pregunta OP, debe llamar en su lugar:

    range.selectNodeContents( ... )

Entonces, el fragmento completo sería:

    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 2

¿Qué tal esta solución simple? :)

<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">

Claro que no es div-construction, como mencionaste, pero igual me funciona.

Answer 3

Hay una solución pura de CSS4:

.selectable{
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */

}

user-select es una especificación CSS Module Level 4, que actualmente es un borrador y una propiedad CSS no estándar, pero los navegadores lo soportan bien: consulte caniuse.com/#feat=user-select .

Lea más sobre el usuario: seleccione aquí en MDN y juegue con él aquí en w3scools

Answer 4

La respuesta de Neuroxik fue realmente útil. Solo tuve problemas con Chrome, porque cuando hice clic en un div externo, no funcionó. Podría resolverlo eliminando los rangos anteriores antes de agregar el nuevo rango:

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 5

Me pareció útil ajustar esta función como un complemento jQuery:

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

Entonces, se convierte en una solución reutilizable. Entonces puedes hacer esto:

<div onclick="$(this).selectText()">http://example.com/page.htm</div>

Y seleccionará la prueba en el div.

Answer 6

Niko Lay: ¿Qué tal esta solución simple? :)

`<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">`

.....

Código antes:

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly">

Código después:

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly" onclick="this.select();" id="selectable">

Solo esta parte onclick = "this.select ();" id = "seleccionable" en mi código funcionó bien. Selecciona todo en mi cuadro de código con un clic del mouse.

Gracias por ayudar a Niko Lay!

Answer 7

Para contenido editable (no entradas normales, debe usar selectNodeContents (en lugar de simplemente seleccionarNodo).

NOTA: Todas las referencias a "document.selection" y "createTextRange ()" son para IE 8 y versiones anteriores ... Probablemente no necesites admitir ese monstruo si intentas hacer cosas complicadas como esta.

function selectElemText(elem) {

    //Create a range (a range is a like the selection but invisible)
    var range = document.createRange();

    // Select the entire contents of the element
    range.selectNodeContents(elem);

    // Don''t select, just positioning caret:
    // In front 
    // range.collapse();
    // Behind:
    // range.collapse(false);

    // Get the selection object
    var selection = window.getSelection();

    // Remove any current selections
    selection.removeAllRanges();

    // Make the range you have just created the visible selection
    selection.addRange(range);

}

Answer 8

Se logra fácilmente con el conjunto de propiedades de css-select set en all. Me gusta esto:

div.anyClass {
  user-select: all;
}

Answer 9

Usando un campo de área de texto, puede usar esto: (A través de 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>

Así es como veo que la mayoría de los sitios web lo hacen. Simplemente lo diseñan con CSS para que no se vea como un área de texto.

Answer 10

Este fragmento proporciona la funcionalidad que necesita . Lo que necesita hacer es agregar un evento a ese div que active fnSeleccione en él. Un truco rápido que no deberías hacer y que posiblemente no funcione, se vería así:

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

Obviamente, suponiendo que se haya incluido el fragmento vinculado al fragmento.

Answer 11

function selectText(containerid) {
    if (document.selection) { // IE
        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>

Ahora debe pasar el ID como argumento, que en este caso es "seleccionable", pero es más global, lo que le permite usarlo en cualquier lugar varias veces sin usar, como lo mencionó chiborg, jQuery.

Answer 12

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

La respuesta anterior no funciona en Chrome porque addRange elimina el rango agregado anterior. No encontré ninguna solución para esto aparte de la selección falsa con css.