CODEWITHSUNDEEP
javascriptjquery
gomzi
gomzi

Reputation: 267

how to write onblur and onfocus event in javascript?

Question: 

 <body onload="setBlurFocus()">   
     <form method="POST" action="#">   
              <input id="id_username" type="text" name="username" maxlength="100" />
              <input type="text" name="email" id="id_email" />
              <input type="password" name="password" id="id_password" /> 
        </form> 
    </body>

I wrote :

function setBlurFocus () {
    var user_input = document.getElementById('id_username');
    var email = document.getElementById('id_email');
    var password = document.getElementById('id_password');
    user_input.onblur = userSetBlur();
    email.onblur = emailSetBlur();
    password.onblur = passSetBlur();
    user_input.onfocus = function() {
            document.getElementById('id_username').value = ''   
        }
    email.onfocus = function() {
            document.getElementById('id_email').value = ''  
        }
    password.onfocus = function() {
            document.getElementById('id_password').value = ''   
        }

}

function userSetBlur() {
    document.getElementById('id_username').value = 'Username'
}
function emailSetBlur() {
    document.getElementById('id_email').value = 'Email'
}

function passSetBlur() {
    document.getElementById('id_password').value = 'Password'
}

Question? How to generalize or optimized this code?

Upvotes: 1

Views: 14602

Answers (3)

quocnguyen
quocnguyen

Reputation: 192

Regarding your update

I using jquery as you tab jquery, the code was bellow , you can check a live sample with this link :

http://jsfiddle.net/e3test/zcGgz/

html code :

<form method="POST" action="#">   
             <input id="id_username" type="text" name="username" maxlength="100" />
<input type="text" name="email" id="id_email" />
<input type="password" name="password" id="id_password" /> 
</form>

javascript code :

$(function(){
    var selector = {
        username: $('#id_username'),
        email: $('#id_email'),
        password: $('#id_password')
    };

    for (var x in selector) {
        selector[x].focus(function(){
           $(this).val('');
        }).blur(function(){
            $(this).val($(this).attr('name'));
        });
    }
});

Hope it help.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816262

You can always attach the methods in JavaScript:

function setBlurFocus() {
    var user_input = document.getElementById('id_username');
    user_input.onblur = someFunction;
    // or with an anonymous function:
    user_input.onfocus = function() {
        // do something
    }
}

Read more about traditional event handling and events in general.

Further explanation:

You attached the function setBlurFocus to the load event of the document. This is correct if you have to access DOM elements with JavaScript. The load event is fired when all the elements are created.

If you attach the setBlurFocus() to the blur event of the input field, then the function is only executed when the text box looses focus.

From your question I concluded you don't want set the event handlers in the HTML, but you want to set them form inside the setBlurFocus function.

Regarding your update:

This is wrong:

user_input.onblur = userSetBlur();

This assigns the return value of the function to onblur. You want to assign the function itself, so you have to write:

 user_input.onblur = userSetBlur;

The () calls the function. You don't want that (in most cases, there are exceptions, see below).

Furthermore, you don't have to use named functions for onblur and anonymous functions for onfocus. It was just an example, to show you the different possibilities you have. E.g. if you assign an event handler to only one element, then there is no need to define it as extra function. But you have to do this if you want to reuse event handlers.

Here is an improved version:

function setBlurFocus () {
    var values = ["Username", "Email", "Password"];
    var elements = [
        document.getElementById('id_username'),
        document.getElementById('id_email'),
        document.getElementById('id_password')
    ];

    for(var i = elements.length; i--; ) {
        elements[i].onblur = setValue(values[i]);
        elements[i].onfocus = emptyValue;
    }
}

function setValue(defaultValue) {
    return function(){this.value = defaultValue;};
}

function emptyValue() {
    this.value = '';
}

this inside the event handlers refers to the element the handler is bound to.

Note: Here setValue returns a function, that is why we call setValue in this case (and not just assign it).

Important note: This will also reset the values to Username etc, if the user entered some data. You have to make sure, that you only reset it if the user has not entered data. Something like:

function setValue(defaultValue) {
    return function(){
        if(this.value !== "") {
            this.value = defaultValue;
        }
    };
}

and you'd have to define emptyValue similar:

function emptyValue(defaultValue) {
    return function(){
        if(this.value === defaultValue) {
            this.value = "";
        }
    };
}

Now that I know what you actually want to do, have also a look at HTML5's placeholder attribute.

Upvotes: 4

aiham
aiham

Reputation: 3614

Well you've tagged it with jquery so this is how to do it in jquery:

function setBlurFocus () {
  //do stuff here
} 

$('#id_username').blur(setBlurFocus);

or

$('#id_username').blur(function(){
    //do stuff here
});

Upvotes: 1

Related Questions