[javascript]자동으로 커서/화면 이동

가끔 프로그램을 만들다보면 자동으로 커서가 이동해줬으면 좋겠다는 생각을 할 때가 있다

예를 들면 회원가입이나 로그인을 할때 input창을 클릭해서 마우스 커서를 이동 한다든가

enter를 쳤을 경우 다음으로 이동하고 싶은 등등의 경우가 있다

 

커서이동

element.focus();

//id로 선택 후 포커스 이동
document.getElementById('IdName').focus();
document.querySelector('#IdName').focus();
//class로 선택 후 포커스 이동
document.getElementsByClassName('ClassName');.focus();
document.querySelector('.ClassName').focus();

이렇게 해도 가끔씩 커서가 이동을 안할 때가 있다 이럴때는 setTimeout를 써주면 된다

let element = document.getElementById('IdName');
setTimeout(function (){element.focus();}, 0);

 

커서는 놔두고 화면만 이동하고 싶은 경우도 있다

예를 들면 포커스로 커서를 이동했는데 화면이 한쪽으로 쏠려있는 경우나 커서는 그냥 두고 화면만 보여주고 싶은 곳으로 이동하고 싶은 경우, 접혀있는 목록을 펼치거나 목록을 클릭 했을때 해당 내용으로 이동하는 등등의 경우가 있다

 

화면 이동

element.scrollIntoView();

//id로 선택 후 화면 이동
document.getElementById('IdName').scrollIntoView();
document.querySelector('#IdName').scrollIntoView();
//class로 선택 후 화면 이동
document.getElementsByClassName('ClassName');.scrollIntoView();
document.querySelector('.ClassName').scrollIntoView();

마찬가지로 setTimeout를 이용해 순서를 정해 줄 수 있다

let element1 = document.querySelector('.ClassName1')
let element2 = document.querySelector('.ClassName2')
setTimeout(function (){element1.scrollIntoView();}, 10);
setTimeout(function (){element2.classList.remove('show');}, 1000);