[Javascript]텍스트필드 input 박스 포커스 했을때 class 추가/제거하기

javascript class를 이용해 객체를 생성 후 input 박스 포커스했을때와 아웃했을때 css를 추가/삭제하는 방법입니다.

 

HTML

<input type="text" class="textField" placeholder="enter text">
<input type="text" class="textField" placeholder="enter text">
<input type="text" class="textField" placeholder="enter text">

 

예시) 3개의 input 박스 

 

CSS

.focus{border:1px solid red}

 

포커스했을때 빨간색 라인추가하기

 

Javascript

class TextField {
  constructor(textField){
    this.elements = document.querySelectorAll('.' + textField);
    this.addFocusClass = this.addFocusClass.bind(this);
    this.removeFocusClass = this.removeFocusClass.bind(this);
    this.init();
  }

  init(){
    this.elements.forEach(element => {
      element.addEventListener('focus',this.addFocusClass);
      element.addEventListener('blur',this.removeFocusClass);
    })
  }

  addFocusClass(event){
    event.target.classList.add('focus');
  }

  removeFocusClass(event){
    event.target.classList.remove('focus');
  }
}

const textField = new TextField('textField');

 

'TextField' 함수에 클래스를 정의하고, 해당 클래스의 인스턴스를 생성하여 클래스 이름이 'textField'인 모든 요소에 대해 이벤트 리스너를 추가합니다.

포커스 이벤트가 발생하면 해당 요소의 클래스를 추가하고, 포커스가 제거되면 클래스를 제거합니다. 공통으로 여러 요소를 한 번에 관리할 수 있습니다.