자바스크립트로 각 인풋 태그마다 포커스/포커스아웃 동작하는 방법(How to do focus/focus out for each input tag with JavaScript)

https://codepen.io/eond/pen/MWoQmbw

HTML

<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">

JavaScript

let input = document.getElementsByTagName("input");
let i;
for(i=0;i<input.length;i++){
    input[i].onfocus = function(){
        this.style.backgroundColor='red';
    }
    input[i].onblur = function(){
        this.style.backgroundColor='';
    }
}

참조

자바스크립트로 모든 태그를 선택하는 방법

https://www.w3schools.com/jsref/met_element_getelementsbytagname.asp

자바스크립트로 포커스/포커스아웃 처리하는 방법(HTML DOM focus() Method)

https://www.w3schools.com/jsref/event_onfocus.asp

2. 포커스됐을 때 밑줄 처리하는 방법

https://codepen.io/eond/pen/PojQmVv

참조

https://www.w3schools.com/jsref/prop_style_border.asp

https://www.w3schools.com/jsref/prop_style_borderbottom.asp

3. 포커스 됐을 때 부모노드에 스타일 주는 방법

https://codepen.io/eond/pen/ExXQmzb

참조

https://www.w3schools.com/jsref/prop_node_parentnode.asp

4. XE, Rhymix 에서 적용시,

jQuery(function ($) {
  // Code..
});

XE나 라이믹스에서는 꼭 이 코드 안에 작성해야만 동작이 되더군요. 자바스크립트인데도 흠-.-?;

5. jQuery를 활용하는 방법

$("input").focus(function(){
    console.log('포커스');
});
$("input").focusout(function(){
    console.log('포커스아웃');
})

...

$('input').blur(function() {
    $('input').removeClass("focus");
})
    .focus(function() {
    $(this).addClass("focus")
});

참조

https://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus