-1

I want to know how to create multiple onfocus and onblur for multiple input fields.

I have something like this but when the name field is onfocus, the email field is onfocus too. Is there a way to solve this? 

$(document).ready(function(){
     focusBlur();
});


function focusBlur() {

    var formName = document.getElementById('name');
    var valueName = 'name';

    var formEmail = document.getElementById('email');
    var valueEmail = 'email';

    formName.onfocus = function() {
        if(formName.value == valueName) {
            formName.value = '';
        } 

        if(formEmail.value == valueEmail) {
            formEmail.value = '';
        }
    };


    formName.onblur = function() {
        if(formName.value == '') {
            formName.value = valueName;
        }

        if(formEmail.value == '') {
            formEmail.value = valueEmail;
        }
    };


}
Seamus
  • 4,539
  • 2
  • 32
  • 42
user2916693
  • 7
  • 6
  • if you're already using jQuery, why not use it all the way? – cr0ss Mar 31 '15 at 19:51
  • you can attach a class to all of them and just go `$(your form).on('mouseover', '.anyclass', function() { // do something } ` – cr0ss Mar 31 '15 at 19:53
  • i want to practice javascript.. – user2916693 Mar 31 '15 at 19:53
  • jQuery has its own way of wrapping event listeners which isn't interoperable with vanilla. Don't mix. – Touffy Mar 31 '15 at 19:57
  • i didn't use vanilla. – user2916693 Mar 31 '15 at 19:59
  • "vanilla" = no library. Anyway, not sure I understand what you're trying to do and how it doesn't work. I'm pretty sure two UI elements cannot have focus simultaneously, though a single focus event could conceivably propagate past them both. – Touffy Mar 31 '15 at 20:01
  • can someone help me with javascript? – user2916693 Mar 31 '15 at 20:02
  • I'm trying to onfocus and onblur the name value when I click on the name value. Also same for the email value. but right now they are onfocus n onblur at the same time, and that is not what i want. So I want to write clean javascript . and how to put multipe onfocus n onblur together – user2916693 Mar 31 '15 at 20:05
  • You're not making things clearer yet. Clicking on an input that isn't disabled will, by default, focus it. You can't "onfocus" or "unblur" things (those are event handlers). What you can do is `focus()` or `blur()` them. And you can only ever focus one element at a time (the previously focused element will lose focus as soon as you focus another). – Touffy Apr 03 '15 at 00:18

1 Answers1

0

If you where to do something like JQuery does you could say something like 

function blur(){}
  var elems=Array.prototype.slice.call(document.getElementsByTagName('input'))
elems.forEach(function(element){

  if(document.addEventListener){
        element.addEventListener('blur',blur)
  }
  else if(element.onblur){
        element.onblur=blur;
  }
})

something like that should do it. depending on the browser support you can use getElementsByClassName or querySelector that will return an array of nodes and the loop through it to attach the events

Dayan Moreno Leon
  • 5,357
  • 2
  • 22
  • 24
  • This is wrong on several levels. The old 'on*' properties are pretty much supported everywhere, they're just not as flexible as the modern addEventListener version. `getElementsByTagName` and other DOM methods will return an HTMLCollection which unfortunately doesn't implement Array methods like forEach. – Touffy Apr 03 '15 at 00:12
  • you are right, i had it wrong on the attachment methods, as for the collection it was an oversight a simple array conversion would solve the problem. Thanks for the pointers – Dayan Moreno Leon Apr 03 '15 at 16:12