Answer:
You don’t need anything you’re doing, you can just use the attribute placeholder
of <input>
in this way:
<input type="text" class="pesquisa-class" placeholder="Digite o produto desejado..." value="">
Explanation:
Utilise javascript to do what you need, it wouldn’t be necessary because the <input>
's of html contains some attributes that facilitate many things, among them the placeholder
would be the most suitable attribute for what you want to do.
The placeholder is the most modern way to inform the user what he has to type in that field, previously we used Label’s that would be texts above the field.
Compatibility:
Tested and running in the following browsers:
- Mozilla Firefox (27.0)
- Google Chrome (32.0)
- Safari (5.1.7)
- Opera (12.16)
- Internet Explorer (IE11,IE10)
Does not work in the following browsers:
- Internet Explorer(IE9,IE8,IE7)
Using a function called placeholder()
:
function placeholder(str){
$('input').css('color','#ccc');
$('input').val(str);
}
You should run it once when loading your page:
placeholder("Digite o produto desejado...");
And you should assign these events to your input, which would be ao clicar nele
(click) to clear its value, and ao sair dele
(Blur) place the placeholder again.
$('input').on("click", function () {
var ValorAnterior = $.cookie("ValorAtual") || "";
$(this).val(ValorAnterior);
});
$('input').on("blur", function () {
$.cookie("ValorAtual", $(this).val());
placeholder("Digite o produto desejado...");
});
But you have to include the plugin jQuery Cookie (if you want to use another form of cookie is your option).
It is not easier to use a field of the type
password
?– Rodrigo Rigotti
But then he encrypts my text, no?
– CRAJ
No, the value goes in plain text for those who receive the values. If you wanted the values to arrive encrypted the ideal would be to use SSL/TSL, but there is an aspect of the HTTP connection (HTTPS, in this case) and no longer has to do with the application.
– Rodrigo Rigotti
But in case it would be a product search box,
– CRAJ
You’re looking to simulate a
placeholder
?– Erlon Charles
I still don’t understand. The user will do the search but you don’t want the text to appear? This is bad from the usability point of view. Try to explain better what you’re trying to do.
– Rodrigo Rigotti
Now that @Erloncharles commented on
placeholder
, the question makes sense. Just set the attributeplaceholder
in the search field with the value you want to appear initially :)– Rodrigo Rigotti
As for usability: unless the user has any problems it will be difficult for them to forget that it is a search, even after the text disappears. What can not is not show (and it is a problem that I am having a Wordpress theme, the focus, automatic, makes the placeholder not show).
– Gustavo Rodrigues
The placeholder served me, I wanted when the user clicked on the search bar to disappear the value , this perfect now. Thank you!!
– CRAJ
@CRAJ Note the answers to the question and mark one as correct, the reputation for who answered it and regardless of who you mark it, it also helps the community to grow :D
– Erlon Charles