I have an internal search form on the site.
<form method="get" id="searchform" action="/search/">
<div>
<input type="text" value="Pesquisar..." name="q" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
<input type="submit" id="searchsubmit" value=" " />
</div>
</form>
But I wanted when I clicked on the <input type="text"> field the name Search ... disappear when the person types. Does anyone know how to do this?
You can use the placeholder attribute to place text that will only appear when the field is empty:
<input type="text" placeholder="Pesquisar..." name="q" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
According to the caniuse.com this attribute is supported by every browser in its current version except Opera Mini ( IE9 or earlier does not support).
If you need a solution to work on legacy browsers, I suggest using the onfocus and onblur functions themselves to handle this - when receiving the focus, the placeholder is hidden; when the focus is lost, if the value size is zero the placeholder is reset. (the alternative would be to do this in onkeyup , so that only when the user starts typing will the placeholder disappear, but I do not think it's a good idea, for several reasons)
Would you still have to store the information somewhere "is the input empty or not?" to decide if what is in input is a placeholder
To do this use placeholder .
<input type="text" placeholder="Pesquisar..." name="q" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />