Lo vedo in tutto il web, ma mi chiedevo se qualcuno avesse il codice JavaScript per il modo più semplice per mostrare il valore di input su sfocatura, ma nascondere a fuoco.Come mostrare/nascondere il valore di input sullo stato attivo?
Questo è quello che uso su my blog. Basta andare lì e controllare il codice sorgente dietro.
function displaySearchText(text){
var searchField = document.getElementById('searchField');
if(searchField != null)
searchField.value = text;
}
Il vostro campo di input dovrebbe essere simile a questo:
<input id='searchField' name='q' onblur='displaySearchText("Search...");' onfocus='displaySearchText("");' onkeydown='performSearch(e);' type='text' value='Search...'/>
L'approccio più semplice che io conosca è il seguente:
<input
name="tb"
type="text"
value="some text"
onblur="if (this.value=='') this.value = 'some text'"
onfocus="if (this.value=='some text') this.value = ''" />
Se non si cura di HTML valido, usi l'attributo placeholder. Funzionerà fuori dalla scatola su un Safari, ed è possibile aggiungere alcuni JS non invadenti per simulare questo comportamento in altri browser.
Più lettura:
e Google. ;-)
La soluzione è simile a quella pubblicata da Josh Stodola, ma è più flessibile e universale.
Immagino di non preoccuparsi di HTML valido non è mai buono, non è vero? Inoltre, l'ottimizzazione per un solo browser ... – Juri
Validator è solo uno strumento. Puoi ignorare l'output finché sai cosa stai facendo.E l'ottimizzazione per lo standard imminente non è poi così male dopotutto :) Il segnaposto –
sembra valido ora tranne per il buon vecchio IE. – kdubs
Questo sempre lavorato per me:
<input
type="text"
value="Name:"
name="visitors_name"
onblur="if(value=='') value = 'Name:'"
onfocus="if(value=='Name:') value = ''"
/>
preferisco jQuery modo:
$(function(){
/* Hide form input values on focus*/
$('input:text').each(function(){
var txtval = $(this).val();
$(this).focus(function(){
if($(this).val() == txtval){
$(this).val('')
}
});
$(this).blur(function(){
if($(this).val() == ""){
$(this).val(txtval);
}
});
});
});
Viene modificato Hide Form Input Values On Focus With jQuery da Zack Perdue.
Dal momento che questo si presenta ancora su google, mi piacerebbe sottolineare che con HTML 5 è possibile utilizzare l'attributo segnaposto con un input per ottenere questo in un pezzo di html.
<input type="text" id="myinput" placeholder="search..." />
Segnaposto è ora standard tra i browser moderni, quindi questo sarebbe davvero il metodo preferito.
Per tutti i browser:
<input onfocus="if(this.value == 'Your value') { this.value = '';}" onblur="if(this.value == '') { this.value = 'Your value';}" value="Your value" type="text" name="inputname" />
Per versione più recente del browser:
<input type="text" name="inputname" placeholder="Your value" />
Eh? Cosa intendi per spettacolo? Cosa stai cercando di fare esattamente? –
Quindi l'input avrà ad esempio "Cerca ..." all'interno di esso, e quando si fa clic sull'input, esso diventerebbe vuoto. Credo di avere già la risposta, ma grazie comunque Ian! =] –
Vedere http://stackoverflow.com/questions/1073428/what-the-best-way-to-display-a-default-text-in-textbixes-and-textareas/1073514#1073514 – Quentin