Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Placeholder

Applying Js Function And Event Listener To Multiple Html Elements

Post a Comment
I am creating a form which I simplified below to get straight to the point, the JS code is to control the placeholder; hiding on focus and reappear on blur, obviously this now work

Solution 1: 

Array.from(document.getElementsByTagName("input")).forEach(input => {

  input.addEventListener("focusin", focus);
  input.addEventListener("focusout", blur.bind(input, input.placeholder));

});


functionfocus() {
  this.placeholder = '';
}

functionblur(placeholder) {
  this.placeholder = placeholder;
}
<divid='card'><inputid='Name'type='text'placeholder='Name' /><inputid='Age'type='text'placeholder='Age' /><inputid='Sex'type='text'placeholder='Sex' /><inputid='Occupation'type='text'placeholder='Occupation' /></div>

Using the this keyword you can access the object which the event was triggered on.

Also you need to preserve the placeholder somehow, in the example above I used bound function but you can chose your own way.

You can also find an example how to specify names manually in revision 2 of this answer.

Solution 2:

try to do ike this

<!DOCTYPE html><html><body><divid='card'><inputid='Name'type='text'placeholder='Name'onfocusin="myFocusFunction(event)"onblur="myBlurFunction(event,'Name')" /><inputid='Age'type='text'placeholder='Age'onfocusin="myFocusFunction(event)"onblur="myBlurFunction(event,'Age')" /><inputid='Sex'type='text'placeholder='Sex'onfocusin="myFocusFunction(event)"onblur="myBlurFunction(event,'Sex')" /><inputid='Occupation'type='text'placeholder='Occupation'onfocusin="myFocusFunction(event)"onblur="myBlurFunction(event,'Occupation')" /></div><script>functionmyFocusFunction(event) {
    
        var element = event.target.getAttribute('id');
        document.getElementById(element).placeholder= '';  
    }
    
    functionmyBlurFunction(event,placeHolder) {        
        var element = event.target.getAttribute('id');           
        document.getElementById(element ).placeholder= placeHolder ;  
    }
    
    </script></body></html>

on blur event we need to pass placeholder string because on focus we set placeholder as " " so, on blur event we can not get placeholder by getAttribute method because it always give null.

Solution 3:

You could give the elements a class, and iterate

document.querySelectorAll('.placeholder').forEach(function(el) {
  el.addEventListener("focusin", myFocusFunction);
  el.addEventListener("focusout", myBlurFunction);
});

functionmyFocusFunction() {
  document.getElementById('Name').placeholder = '';
}

functionmyBlurFunction() {
  document.getElementById('Name').placeholder = 'Name';
}
<divid='card'><inputid='Name'class="placeholder"type='text'placeholder='Name' /><inputid='Age'class="placeholder"type='text'placeholder='Age' /><inputid='Sex'class="placeholder"type='text'placeholder='Sex' /><inputid='Occupation'type='text'placeholder='Occupation' /></div>

Solution 4:

You can set a common class for the inputs that need this function，for example， ‘add-tip’， and then：

var x = document.querySelectorAll(".add-tip");
for (var i=0;i< x.length;i++) {
    x[i].addEventListener("focusin", myFocusFunction);
    x[i].addEventListener("focusout", myBlurFunction);
}
functionmyFocusFunction(e) {
    e.target.setAttribute('placeholder','');  
}

functionmyBlurFunction(e) {
    e.target.setAttribute('placeholder','Name');  
}

Post a Comment for "Applying Js Function And Event Listener To Multiple Html Elements"