자바스크립트 모바일 키보드 닫는 방법(비활성화) | Close Mobile Keyboard & Menu on Return

자바스크립트 모바일 키보드 닫는 방법(비활성화) Close Mobile Keyboard & Menu on Return

모바일에서 Input 태그에 포커싱이 들어가면 자동으로 키보드가 활성화 되는데요. input 태그에 값을 모두 입력하고 return을 눌렀을 때 키보드만 hide 처리하는 방법이 있습니다. 보통 form 태그에 감싸져있는 input이라면 return을 눌렀을 때 자동으로 form submit 이벤트가 발생할 것입니다.

해결방법

해결방법은 keypress 이벤트 흐름을 중단시키고 현재 input 포커스를 blur처리를 하면 됩니다.

// Javascript
document.querySelector('input').addEventListener('keypress', (e) => {
  if (e.keyCode === 13) {
  	  e.preventDefault();
      document.querySelector('input').blur(); // remove input focus
  }  
})


// jQuery
$(document).ready( function () {
  $("input").keypress(function(e) {
  if (e.keyCode === 13) {
  	  e.preventDefault();
      $("input").blur(); // remove input focus
  }
  });
});