Jquery: ¿hay alguna manera de resaltar el texto de una Div cuando haces clic en él?

Question

Con Jquery hay una manera de resaltar/seleccionar (como si alguien fuera a seleccionar con el mouse) el texto dentro de un div en el que hago clic? no es un cuadro de texto, solo un div normal.

estoy tratando de hacer un cuadro de 'url corto', donde cuando alguien hace clic en el área de texto, resalta todo el texto, pero tampoco debe permitir que las personas cambien el texto en el cuadro de texto, pero cuando el cuadro de texto está desactivado, no puedes seleccionar ningún texto, así que estoy tratando de hacerlo, pensé que un div sería más fácil.

lo siento muchachos, no hice un buen trabajo al explicar lo que quise decir al principio, agregué la información anterior para aclarar.

Answer 1

Derecho, esto no se trata de colores de fondo, se trata de seleccionar el texto.

En primer lugar establece una entrada de sólo lectura, evitando que la gente cambiando el valor:

<input type="text" readonly="readonly" value="ABC" /> 

Luego, utilizando jQuery (o similar) para seleccionar el texto una vez que se ha hecho clic:

$('input').click(function() { 
    $(this).select(); 
}); 

Usted debe estilo esta entrada como mejor le parezca, tal vez para que se vea como un texto normal, take a look at this jsFiddle para una demostración más.

Answer 2

Puede modificar el CSS del elemento después de haber hecho clic en él. Algo así como (no probado):

$(".el").click(function() { 

    $(".el").css("color", "red").css("background-color", "yellow"); 

}); 

Answer 3

$("div.myDiv").click(function() { 
    $(this).css("background-color", "yellow"); 
}) 

O puede agregar una clase:

$("div.myDiv").click(function() { 
    if($(this).hasClass("highlited")) { 
     $(this).removeClass("highlited"); 
    } else { 
     $(this).addClass("highlited"); 
    } 
} 

Answer 4

Working demo

Si se habla sólo de clic y no seleccionar dentro de cualquier div. Sería algo así:

$("div").click(function() 
      { 
       $(this).css({"background":"yellow"}); 
      }); 

Answer 5

Véase mi respuesta here (que en enlaces de vuelta a another answer).

Answer 6

por qué no sólo tiene que utilizar CSS:

div.<someclass>:focus { 
    background:yellow; 
} 

Answer 7

Una selección se define por un objeto gama de DOM - por lo que tiene que trabajar con ellos (document.createRange o document.createTextRange). Ver este SO hilo: Selecting text in an element (akin to highlighting with your mouse)

Answer 8

He aquí una jQuery menos fragmento rápida y sucia código que puse juntos hace algún tiempo:

/* 
* Creates a selection around the node 
*/ 
function selectNode(myNode){ 
    // Create a range 
    try{ // FF 
     var myRange = document.createRange(); 
    }catch(e){ 
     try{ // IE 
      var myRange = document.body.createTextRange(); 
     }catch(e){ 
      return; 
     } 
    } 

    // Asign text to range 
    try{ // FF 
     myRange.selectNode(myNode); 
    }catch(e){ 
     try{ // IE 
      myRange.moveToElementText(myNode); 
     }catch(e){ 
      return; 
     } 
    } 

    // Select the range 
    try{ // FF 
     var mySelection = window.getSelection(); 
     mySelection.removeAllRanges(); // Undo current selection 
     mySelection.addRange(myRange); 
    }catch(e){ 
     try{ // IE 
      myRange.select(); 
     }catch(e){ 
      return; 
     } 
    } 
} 

Se podría utilizar una gran cantidad de mejoras (especialmente me gusta la abundancia excesiva de intenta ... atrapar bloques) pero es un buen punto de partida. Con "nodo" me refiero a un elemento del árbol DOM.

Answer 9

Se puede utilizar un área de texto y en lugar de su desactivación, utiliza el 'sólo lectura' atribuyen

<textarea name="selectable" readonly="readonly" />