CODEWITHSUNDEEP
javascript
Jack
Jack

Reputation: 51

Javascript Run function on all input fields on focus

I want to execute a function when any of the text field is focused.

Something like this, BUT purely in Javascript - NOT IN JQUERY

$("input").focus(function() {
    alert("Hello World");
});

I am trying: 

document.getElementById("text1").onfocus = alert(1);

But this only shows the alert after loading page, nothing else.

Thanks

Upvotes: 3

Views: 4672

Answers (5)

GorvGoyl
GorvGoyl

Reputation: 49410

This one supports input elements that are loaded asynchronously too.

document.addEventListener("focusin", inputBoxListener)

function inputBoxListener(event) {
  if (event.target.tagName === "INPUT") {
    console.log("focused on input")
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event

Upvotes: 1

ptmp_727
ptmp_727

Reputation: 95

I know I am probably late to this, but I just wanted to add my 2 cents, as I see a lot of Stackoverflow answers like this still using JQuery and many people have moved on from JQuery, and might want another option

You could either use the focusin event or capture the focus in the Capturing phase from the top down, in either JQuery or JS, If It works in JS, it should work in the other, as I dont use JQ

let form = document.forms.myForm;
form.addEventListener('focus', (event) => {
    console.log('Focused!');
    console.log(event.target);
}, true);

//Work around focusin
form.addEventListener('focusin', (event) => {
    console.log('Focused In!');
    console.log(event.target);
});

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48683

If you like some aspects of jQuery, but do not want to include the entire library in your project, you can check out You Might Not Need jQuery. You can set the minimum version of IE that you support, in the settings at the top of the page.

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

function addEventListeners(selector, type, handler) {
  var elements = document.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i++) {
    addEventListener(elements[i], type, handler);
  }
}

addEventListeners('input', 'focus', function(e) {
  if (this.value !== this.placeholder) {
    this.value = this.placeholder;
  } else {
    this.value = '';
  }
});
input {
  display: block;
}
<input type="text" placeholder="One" />
<input type="text" placeholder="Two" />
<input type="text" placeholder="Three" />

Upvotes: 1

Abdul Rehman Sayed
Abdul Rehman Sayed

Reputation: 6672

Get elements by tag name & loop("Iterate") on them for attaching focus.

http://www.w3schools.com/jsref/met_doc_getelementsbytagname.asp

var x=document.getElementsByTagName("input");

EDIT : Put this at the end of page

<script>
  var x=document.getElementsByTagName("input");
for(i=0;i<x.length;i++)
{
x[i].addEventListener('focus',function(){
       alert("focus");
    });
}

</script>

Upvotes: 3

Grundy
Grundy

Reputation: 13381

Yet another way with document.querySelectorAll for new browser

var inputs = document.querySelectorAll('input');

and then in loop for example use addEventListener

for(var i=0,len=inputs.length;i<len;i++){
    inputs[i].addEventListener('focus',function(){
        //handle event
    })
}

Upvotes: 2

Related Questions