Home/ Questions/Q 8166871
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T20:01:45+00:00

I have 4 textboxes on my page. I used jquery focus and blur functions

  • 0

I have 4 textboxes on my page. I used jquery focus and blur functions to make the default of the textbox to appear and disappear. My code: 

$(document).ready(function() {

$("#name").focus(function() {
    $("#name").removeClass("idleField").addClass("focusField");
    if($("#name").val() == "username") {
        $("#name").val('');
    }
});

$("#name").blur(function() {
    $("#name").removeClass("focusField").addClass("idleField");
    if($("#name").val().length == 0) {
        $("#name").val('username');
    }
});

$("#password").focus(function() {
    $("#name").removeClass("idleField").addClass("focusField");
    if($("#password").val() == "password") {
        $("#password").val('');
    }   
});

$("#password").blur(function() {
    $("#name").removeClass("focusField").addClass("idleField");
    if($("#password").val().length == 0) {
        $("#password").val('password');
    }
});

$("#firstname").focus(function() {
    $("#firstname").removeClass("idleField").addClass("focusField");
    if($("#firstname").val() == "firstname") {
        $("#firstname").val('');
    }
});

$("#firstname").blur(function() {
    $("#firstname").removeClass("focusField").addClass("idleField");
    if($("#firstname").val().length == 0) {
        $("#firstname").val('firstname');
    }
});

$("#lastname").focus(function() {
    $("#lastname").removeClass("idleField").addClass("focusField");
    if($("#lastname").val() == "lastname") {
        $("#lastname").val('');
    }   
});

$("#lastname").blur(function() {
    $("#lastname").removeClass("focusField").addClass("idleField");
    if($("#lastname").val().length == 0) {
        $("#lastname").val('lastname');
    }
});

$("#email").focus(function() {
    $("#email").removeClass("idleField").addClass("focusField");
    if($("#email").val() == "username@example.com") {
        $("#email").val('');
    }
});

$("#email").blur(function() {
    $("#email").removeClass("focusField").addClass("idleField");
    if($("#email").val().length == 0) {
        $("#email").val('username@example.com');
    }
});

});

am i doing any thing wrong here?

Any help would be apreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is a mistake in your #password field, where you still have #name as the selector.

    Also, it would be better to handle this differently, I would for example, store the original values as data attributes of each element that requires one, and then attach an event handler to all of them, which checks the element’s data attribute against it’s current value…

    Assuming HTML something like this…

    <input type='text' id='name' data-init='first name'>
<input type='text' id='age' data-init='your age'>

    jQuery something like this works…

    // select all the elements to operate on
$("#name,#age").each(function(){
    $me = $(this) // cache the current jQuery object for better performance
    $me.val($me.data('init')) // set the val to the data object of each element
}).focus(function(){ // handle focus for all elements
    $me = $(this)
    $me.removeClass('idleField').addClass('focusField')
    if($me.val() == $me.data('init'))
        $me.val('')
}).blur(function(){ // handle blur for all emements
    $me = $(this)
    $me.removeClass('focusField').addClass('idleField')
    if($me.val().length == 0)
        $me.val($me.data('init'))
})
    • 0