Show helper text on clicking textbox using jquery
Question
I want to display helper text on clicking on the text boxes. eg: If I click a text box it should help us by saying what to type: Enter username here
I have tried below given code but the text "Enter username" is fading out, I want the text to be displayed until the focus is changed to another text box.
please, suggest some code for this type.
<input type = "text"/><span>Enter username</span>
<input type = "text"/><span>Enter password</span>
$(document).ready(function(){
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
});
Solution
Something like the following should do it
$(function(){
$("input")
.focus(function () {
$(this).next("span").fadeIn(1000);
})
.blur(function () {
$(this).next("span").fadeOut(1000);
});
});
Here is a Working Demo
OTHER TIPS
I'm not sure why you're manipulating the CSS display property as well as using fadeIn/fadeOut:
$(document).ready(function(){
$("input").focus(function () {
$(this).next("span").fadeIn(1000);
}).blur(function() {
$(this).next("span").fadeOut(1000);
});
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow