Jquery: y a-t-il un moyen de mettre en évidence le texte D'une Div lorsque vous cliquez dessus?
avec Jquery y a-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'une div sur laquelle je clique? pas une boîte de texte, juste une div normale.
j'essaie de faire une boîte' url courte', où quand quelqu'un clique sur le textarea, il met en évidence tout le texte, mais il a aussi besoin de ne pas permettre aux gens de changer le texte dans la zone de texte, mais quand une zone de texte est désactivée, vous ne pouvez pas sélectionner n'importe quel texte, donc j'essaie de le faire, j'ai juste pensé qu'une div serait facile.
désolé les gars, je n'ai pas fait un bon travail d'expliquer ce que je voulais dire au début, ajouté l'information ci-dessus pour clarifier.
8 réponses
D'accord, il ne s'agit pas de couleurs de fond, il s'agit de sélectionner le texte.
tout d'abord définir un input pour readonly, en empêchant les gens de changer la valeur:
<input type="text" readonly="readonly" value="ABC" />
puis 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 de cette entrée comme bon vous semble, peut-être pour le faire ressembler à un morceau normal de texte, jetez un oeil à ce jsFiddle pour une autre démonstration.
Vous pouvez modifier le CSS de l'élément après qu'il ait été cliqué. Quelque chose comme (non testé):
$(".el").click( function() {
$(".el").css( "color", "red" ).css( "background-color", "yellow" );
});
$("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");
}
}
Vous pouvez utiliser un textarea et au lieu de le désactiver, utilisez l'attribut 'readonly'
<textarea name="selectable" readonly="readonly" />
voici un extrait de code rapide et sale que j'ai créé 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;
}
}
}
On pourrait utiliser beaucoup d'amélioration (j'ai surtout la haine de la sur-abondance de l'essayer...catch) mais c'est un bon point de départ. Avec "noeud", je veux dire un objet de L'arbre DOM.
si vous parlez seulement de cliquer et de ne pas sélectionner à l'intérieur d'une div. Il serait quelque chose comme ceci:
$("div").click(function()
{
$(this).css({"background":"yellow"});
});
pourquoi ne pas simplement utiliser le css:
div.<someclass>:focus {
background:yellow;
}
une sélection est définie par un objet range dans DOM - donc vous devez travailler avec eux (document.createRange ou document.createTextRange). Voir ce fil: Sélectionner du texte dans un élément (s'apparente à la mise en évidence avec votre souris)