Come posso farlo in questo modo quando fai clic all'interno di un'area di testo, viene selezionato il suo intero contenuto?
E alla fine quando fai di nuovo clic per deselezionarlo.
Come posso farlo in questo modo quando fai clic all'interno di un'area di testo, viene selezionato il suo intero contenuto?
E alla fine quando fai di nuovo clic per deselezionarlo.
Risposte:
Per evitare che l'utente si infastidisca quando viene selezionato l'intero testo ogni volta che provano a spostare il cursore con il mouse, è necessario farlo utilizzando l' focus
evento, non l' click
evento. Ciò che segue farà il suo lavoro e risolverà un problema in Chrome che impedisce alla versione più semplice (cioè di chiamare semplicemente il select()
metodo textarea in un focus
gestore di eventi) per funzionare.
jsFiddle: http://jsfiddle.net/NM62A/
Codice:
<textarea id="foo">Some text</textarea>
<script type="text/javascript">
var textBox = document.getElementById("foo");
textBox.onfocus = function() {
textBox.select();
// Work around Chrome's little problem
textBox.onmouseup = function() {
// Prevent further mouseup intervention
textBox.onmouseup = null;
return false;
};
};
</script>
versione jQuery:
$("#foo").focus(function() {
var $this = $(this);
$this.select();
// Work around Chrome's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});
tab
nell'area di testo - l'altra soluzione funziona in entrambi i casi :)
$("#foo").mouseup(function() {
$("#foo").unbind("mouseup");
return false;
});
devi fare riferimento alla casella di testo senza usare this
basta fare riferimento con il percorso completo .. e funzionerà ..
Modo migliore, con soluzione al problema tab e chrome e nuovo modo jquery
$("#element").on("focus keyup", function(e){
var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if(keycode === 9 || !keycode){
// Hacemos select
var $this = $(this);
$this.select();
// Para Chrome's que da problema
$this.on("mouseup", function() {
// Unbindeamos el mouseup
$this.off("mouseup");
return false;
});
}
});
Ho finito per usare questo:
$('.selectAll').toggle(function() {
$(this).select();
}, function() {
$(this).unselect();
});
readonly
attributo.
$('textarea').focus(function() {
this.select();
}).mouseup(function() {
return false;
});
Versione jQuery leggermente più corta:
$('your-element').focus(function(e) {
e.target.select();
jQuery(e.target).one('mouseup', function(e) {
e.preventDefault();
});
});
Gestisce correttamente la custodia angolare Chrome. Vedi http://jsfiddle.net/Ztyx/XMkwm/ per un esempio.
Selezione del testo in un elemento (simile all'evidenziazione con il mouse)
:)
Utilizzando la risposta accettata su quel post, puoi chiamare la funzione in questo modo:
$(function() {
$('#textareaId').click(function() {
SelectText('#textareaId');
});
});
$(this).select()
, lo userò perché è meno codice :)