No credit. Here's a complete function to show/hide the [×] button and also hide the × itself if you click the × —plus, reset the input value:
$('.searchform input').on("keyup", function() {
// check if the value isn't empty...
if (this.value.length) {
$('.clear').stop(true, true).fadeIn()
.on("click", function() {
// Also, fade-out the `x` button on click
$(this).fadeOut();
// and reset the input value
$('.searchform input').val('');
});
} else {
$('.clear').stop(true, true).fadeOut();
}
});
I have a search input where I'd like a span to fadeIn when a user starts typing. Would anyone mind helping me out with this?
http://codepen.io/chrisburton/pen/zgwis
Here ⇒ http://jsfiddle.net/tovic/43eG7/69/
Thanks very much @hompimpa. I'll have to take a look at it when I'm feeling a little better.
By the way, what site can I use to credit you for the code?
@Hompimpa For some reason I'm getting a conflict with the two codes together.
The first code is for clearing the input and the other is for fading in the button when the user starts typing.
http://codepen.io/chrisburton/pen/zgwis
Edit: My fault. I forgot to add the hidden class. Although I do have to hit backspace in the input for it to fade out.
No credit. Here's a complete function to show/hide the [×] button and also hide the × itself if you click the × —plus, reset the input value:
Demo: http://jsfiddle.net/tovic/43eG7/70/
Works like a charm @hompimpa. Good work. I'm crediting you regardless, I just won't have a URL to put for you. Thanks again.