SHARE

Yo ninjas, in this JavaScript tutorial I’ll show you how to access form elements and work with their properties and methods in JavaScript. In particular, we’ll look at the onblur and andfocus method in this tutorial.

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

4 COMMENTS

  1. I have multiple text field, like email , username, password, in form. now I want to change their border color on focus. should I write different function for all of them?

    var myForm = document.forms.test;
    myForm.username.style.outline = "none";
    myForm.username.style.border = "1px solid blue";
    myForm.username.onfocus = function()
    {
     myForm.username.style.background = "lightblue";
    };myForm.username.onblur = function()
    {
        myForm.username.style.background = "none";
    };myForm.email.style.outline = "none";
    myForm.email.style.border = "1px solid blue";
    myForm.email.onfocus = function()
    {
     myForm.email.style.background = "lightblue";
    };myForm.email.onblur = function()
    {
        myForm.email.style.background = "none";
    };myForm.password.style.outline = "none";
    myForm.password.style.border = "1px solid blue";
    myForm.password.onfocus = function()
    {
     myForm.password.style.background = "lightblue";
    };myForm.password.onblur = function()
    {
        myForm.password.style.background = "none";
    };myForm.password_confirm.style.outline = "none";
    myForm.password_confirm.style.border = "1px solid blue";
    myForm.password_confirm.onfocus = function()
    {
     myForm.password_confirm.style.background = "lightblue";
    };myForm.password_confirm.onblur = function()
    {
        myForm.password_confirm.style.background = "none";
    };

LEAVE A REPLY

Please enter your comment!
Please enter your name here