Jquery: c'è un modo per evidenziare il testo di una Div quando si fa clic su di esso?

Question

Con Jquery c'è un modo per evidenziare/selezionare (come se qualcuno dovesse selezionarlo con il mouse) il testo all'interno di un div su cui clicco? non una casella di testo, solo un div normale.

Sto provando a creare una casella "URL breve", in cui quando qualcuno fa clic nell'area di testo, evidenzia tutto il testo, ma NON deve consentire alle persone di modificare il testo nella casella di testo, ma quando un textbox è disabilitato non puoi selezionare alcun testo, quindi sto provando a farlo, ho solo pensato che un div sarebbe stato più semplice.

scusate ragazzi non ho fatto un gran lavoro di spiegare cosa volevo dire all'inizio, ho aggiunto informazioni sopra per chiarire.

Answer 1

Giusto, non si tratta di colori di sfondo, si tratta di selezionare il testo.

Prima impostato un ingresso a sola lettura, impedire che le persone cambiando il valore:

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

Poi utilizzando jQuery (o simile) per selezionare il testo una volta che è stato cliccato:

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

Si dovrebbe stile questo input come meglio credi, forse per far sembrare un normale bit di testo, take a look at this jsFiddle per un'ulteriore dimostrazione.

Answer 2

È possibile modificare il CSS dell'elemento dopo che è stato fatto clic. Qualcosa di simile (non testata):

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

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

}); 

Answer 3

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

Oppure è possibile aggiungere una classe:

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

Answer 4

Working demo

Se si parla solo di clic e non selezionando all'interno di qualsiasi div. Sarebbe qualcosa di simile:

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

Answer 5

Vedere la mia risposta here (che a sua volta link a another answer).

Answer 6

perché non basta usare i CSS:

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

Answer 7

Selezione è definito da un oggetto range in DOM - quindi bisogna lavorare con loro (o document.createRange document.createTextRange). Vedi questo SO discussione: Selecting text in an element (akin to highlighting with your mouse)

Answer 8

Ecco un rapido e sporco codice jQuery-meno frammento ho messo insieme qualche tempo fa:

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

Si potrebbe usare un sacco di miglioramento (I specialmente odio la sovrabbondanza di prova ... cattura i blocchi) ma è un buon punto di partenza. Con "nodo" intendo un oggetto dell'albero DOM.

Answer 9

È possibile utilizzare una textarea e anziché disabilitarlo, utilizzare la 'sola lettura' attributo

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