https://jsfiddle.net/huat81z4/
CODE HTML:
<input class="search" value="Search" type="text" size="18" name="s" id="s">
CODE JS:
$(document).ready(function(){
$('input .search).click(function(){
$(".this").attr("value", "");
});
});
I want to disappear the word "Search" when the user clicks on the form. What is wrong with my code?
Is there any function that makes it better?
use placeholder attribute
<input class="search" placeholder="Search" type="text" size="18" name="s" id="s">
Just use placeholder attribute instead of value.
<input class="search" placeholder="Search" type="text" size="18" name="s" id="s">
Or if you want to do it in a script do it like that:
$(document).ready(function(){
$('.search').click(function(){
$(this).attr("value", "");
});
});
You could try
<input class="search" placeholder="Search" type="text" size="18" name="s" id="s">
This will put a placeholder text inside your text input, and when someone tries to enter anything, it will be gone.
But if you want to stick to js, then:
$(document).ready(function(){
$('input.search').click(function(){
$(this).attr("value", " ");
});
});
You had a few typos in your code.
Use html5 placeholder
<input class="search" placeholder="Search" type="text" size="18" name="s" id="s">
And make correct your code with this
<script>
$(document).ready(function(){
$('input .search').click(function(){
$(this).attr("value", "");
});
});
</script>
You forget to ' in search and $(".this") to $(this)
You can simply use Placeholder and also there is a typo in your code:-
$(".this").attr("value", ""); :- Incorrect
$(this).attr("value", ""); :- correct
I think you better use the HTML attribute placeholder like all the other answers suggest.
Here I'll explain what's wrong with your JavaScript:
$(document).ready(function(){
$('input .search).click(function(){ // the string isn't closed and you have to use 'input.search', because 'input .search' looks for a child element of an input
$(".this").attr("value", ""); // it's only this, not ".this"
});
});
This code works
$(document).ready(function(){
$('input.search').focus(function(){
$(this).attr("value", "");
});
});
You have some typo mistake so it's not working:
$('.search').click(function(){
$(this).attr("value", "");
});
First: $('input .search) you didn't close '.
Second: Use $(this) instead of $(".this")
Check Your updated Fiddle here.
Note: I suggest to use placeholder instead of it.
Hope it helps.
You want it to disappear immediate after your click,
Here it is using JavaScript
JS : DEMO
$(".search").click(function()
{
$(".search").prop("value","");
});
OR
Placeholder attribute of HTML
HTML
<input class="search" placeholder="Search" type="text" size="18" name="s" id="s">
Note: It will only disappear after you start typing.
$(document).ready(function(){
$('.search').on('focus', function() {
$(this).val("");
});
});
You can use this too, it is simple ...
<input class="text-input" type="text" value="Search" onfocus="if(this.value == 'Search') this.value = '';" onblur="if(this.value=='') this.value='Search';"/>
