Jquery: existe-t-il un moyen de mettre en évidence le texte d'une Div lorsque vous cliquez dessus?

Question

Avec Jquery existe-t-il un moyen de surligner/sélectionner (comme si quelqu'un devait le sélectionner avec la souris) le texte à l'intérieur d'un div sur lequel je clique? pas un textbox, juste un div normal. J'essaye de faire une boîte d'URL courte, où quand quelqu'un clique sur la zone de texte, elle met en évidence tout le texte, mais elle doit également NE PAS permettre aux gens de changer le texte dans la zone de texte, mais quand un La zone de texte est désactivée, vous ne pouvez pas sélectionner de texte, donc j'essaye de le faire, je pensais juste qu'un div serait plus facile.

désolé les gars je n'ai pas fait un excellent travail d'expliquer ce que je voulais dire au début, a ajouté des informations ci-dessus pour clarifier.

Answer 1

À droite, il ne s'agit pas de couleurs de fond, mais de la sélection du texte.

d'abord définir une entrée en lecture seule, empêcher les gens de changer la valeur:

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

Ensuite, en utilisant jQuery (ou similaire) pour sélectionner le texte une fois qu'il a été cliqué:

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

Vous devriez le style cette entrée comme vous le souhaitez, peut-être pour faire ressembler un morceau de texte normal, take a look at this jsFiddle pour une démonstration supplémentaire.

Answer 2

Vous pouvez modifier le CSS de l'élément après avoir cliqué dessus. Quelque chose comme (non testé):

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

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

}); 

Answer 3

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

Ou vous pouvez ajouter une classe:

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

Answer 4

Working demo

Si vous ne parlez que de cliquer et ne pas sélectionner dans une div. Ce serait quelque chose comme ceci:

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

Answer 5

Voir ma réponse here (qui dans les liaisons tour à another answer).

Answer 6

pourquoi ne pas utiliser css:

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

Answer 7

Une sélection est définie par un objet de plage dans DOM - donc vous devez travailler avec eux (ou document.createRange document.createTextRange). Voir ce SO fil: Selecting text in an element (akin to highlighting with your mouse)

Answer 8

Voici un extrait de code jQuery moins rapide et sale, je mis ensemble il y a quelque temps:

/* 
* 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; 
     } 
    } 
} 

Il pourrait utiliser beaucoup d'amélioration (je déteste surtout la surabondance de essayer ... attraper des blocs) mais c'est un bon point de départ. Avec "noeud" je veux dire un élément de l'arbre DOM.

Answer 9

Vous pouvez utiliser un textarea et au lieu de le désactiver, utilisez le « readonly » attribut

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