Posso facilmente creare un campo di input html che contiene già del testo. Ma quando l'utente fa clic sul campo di input, il testo non scompare ma rimane lì. L'utente deve quindi rimuovere manualmente il testo da digitare. Come posso creare un campo di input in cui quando l'utente fa clic sulla casella del campo di immissione, il testo scompare?Il testo nel campo HTML scompare quando si fa clic su?
Che ne dici di qualcosa del genere?
<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">
Questo sarà chiaro sulla focalizzazione la prima volta, ma poi non sarà chiaro su fuochi successivi dopo che l'utente inserisce il proprio valore, quando lasciato vuoto ripristina il valore dato.
Per ottenere questo, è possibile utilizzare i due eventi onFocus e onblur:
<input type="text" name="theName" value="DefaultValue"
onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}"
onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}"
style="color:#BBB;" />
Che cosa si vuole fare è utilizzare l'attributo HTML5 placeholder che consente di impostare un valore predefinito per la tua casella di input:
<input type="text" name="inputBox" placeholder="enter your text here">
Questo dovrebbe raggiungere quello che stai cercando. Tuttavia, fai attenzione perché l'attributo segnaposto non è supportato in Internet Explorer 9 e versioni precedenti.
HTML5 risolve questo problema per noi con l'attributo segnaposto. Non c'è bisogno di gestire nuovamente gli eventi. Buona risposta – Ron
l'attributo di input placeholer non supporta in IE9 e IE8 ... per ulteriori informazioni vai su http://caniuse.com –
C'è un modo per far sparire il segnaposto quando l'utente inizia a digitare, ma non scompare quando il campo è 'focalizzata.'? –
prova questo fuori.
<label for="user">user</label>
<input type="text" name="user"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue"
value="username" maxlength="19" />
spero che questo aiuti.
e cosa succede se l'utente non inserisce il vlue, passerà il valore vuoto o il valore di default? il mio caso d'uso è anche lo stesso, ma voglio che quando l'utente non immette nulla, il valore vuoto dovrebbe assegnare come fare a riguardo? Qualche suggerimento? E nessun uso dell'attributo placholder – mahesh
Questo è tanto semplice penso che la soluzione che dovrebbe risolvere tutti i vostri problemi:
<input name="myvalue" id="valueText" type="text" value="ENTER VALUE">
Questo è il tuo pulsante di invio:
<input type="submit" id= "submitBtn" value="Submit">
poi mettere questo piccolo jQuery in un file js:
//this will submit only if the value is not default
$("#submitBtn").click(function() {
if ($("#valueText").val() === "ENTER VALUE")
{
alert("please insert a valid value");
return false;
}
});
//this will put default value if the field is empty
$("#valueText").blur(function() {
if(this.value == ''){
this.value = 'ENTER VALUE';
}
});
//this will empty the field is the value is the default one
$("#valueText").focus(function() {
if (this.value == 'ENTER VALUE') {
this.value = '';
}
});
E funziona anche con i browser più vecchi. Inoltre può essere facilmente convertito in javascript normale se necessario.
Grazie a IE9 che dobbiamo supportare.Quindi non potrei usare la cosa del segnaposto. Per mantenere l'impostazione del valore nella casella di testo in un punto, ho usato jQuery per impostare il valore nella casella sul documento pronto. $ (document) .ready (function() { \t/* set ricerca valore della casella di input sul carico di documento */ \t $ ('# valueText') Val ("immettere il valore");. } – atsurti
semplice come questo: <input type="text" name="email" value="e-mail..." onFocus="this.value=''">
e che cosa se l'utente non entra nella vlue, sarà passare valore del bianco o il valore defaul? il mio caso d'uso è anche lo stesso, ma voglio che quando l'utente non immette nulla, il valore vuoto dovrebbe assegnare come fare a riguardo? Qualche suggerimento? E nessun uso dell'attributo placholder – mahesh
@mahesh Ciò che puoi fare è aggiungere un'immagine di sfondo con il testo desiderato scritto in essa e aggiungere un listener di eventi onClick che rende l'immagine invisibile. –
questa è una soluzione GRANDE se devi ancora supportare IE9! Grazie! –