티스토리 뷰

Javascript

Javascript 와 JQuery 에서 focus()로 포커스 이동하기

travelpark 2022. 5. 24. 00:07
반응형

웹페이지에서 스크립트 실행 시 특정 포커스로 이동해야할 경우가 있습니다. 기본적으로 Html을 브라우저에서 구현하면 탭키를 이용해 위치를 이동할 수 있습니다. 일반적으로 탭키를 누르면 코딩 순서대로 이동하게 되는데 레이어 팝업을 호출할 경우 레이어 디자인이 하단에 있으면 레이어 창이 뜬 후에도 바로 레이어로 이동할 수 없는 경우가 생깁니다.

 

이런 상황에서 각각 Javascript와 JQuery를 사용해 포커스 이동하는 방법을 확인해보겠습니다.

 

[Javascript]

<!DOCTYPE html>
<html>
<head>
<title>Javascript Demo</title>
<style>
    #layerTest {
    	display: none;
    }
</style>
</head>
<body>
<div>
    <a href="javascript:;" id="myTest" title="새창 열림" onclick="lyOpen()">테스트</a>
    <input type="text" id="myTextField1" value="Text field1">    
    <input type="text" id="myTextField2" value="Text field2">
</div>
<div id="layerTest">
    <p>레이어 테스트. 디자인은 무시합니다.</p>
    <a href="javascript:;" id="myClose" onclick="lyClose()">닫기</a>
</div>
<div>
    <input type="text" id="myTextField3" value="Text field3">
</div>
<script> 
   
    function lyOpen(){
        document.getElementById("layerTest").style.display = "block";
        document.getElementById("myClose").focus(); //주석처리 시 myTextField1, myTextField2 지난 후 레이어로 이동
    }
   
    function lyClose(){
    	document.getElementById("layerTest").style.display = "none";
        document.getElementById("myTest").focus(); //주석처리 시 myTextField3로 이동
    }
   
</script>
</body>
</html>

 

[JQuery]

<!DOCTYPE html>
<html>
<head>
<title>JQuery Demo</title>
<style>
    #layerTest {
    	display: none;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>
    <a href="javascript:;" id="myTest" title="새창 열림" onclick="lyOpen()">테스트</a>
    <input type="text" id="myTextField1" value="Text field1">    
    <input type="text" id="myTextField2" value="Text field2">
</div>
<div id="layerTest">
    <p>레이어 테스트. 디자인은 무시합니다.</p>
    <a href="javascript:;" id="myClose" onclick="lyClose()">닫기</a>
</div>
<div>
    <input type="text" id="myTextField3" value="Text field3">
</div>
<script> 
   
    function lyOpen(){
        $("#layerTest").show();
        $("#myClose").focus(); //주석처리 시 myTextField1, myTextField2 지난 후 레이어로 이동
    }
   
    function lyClose(){
    	$("#layerTest").hide();
        $("#myTest").focus(); //주석처리 시 myTextField3로 이동
    }
   
</script>
</body>
</html>

 

위 샘플을 이용해 확인해보시면 쉽게 이해하시고 응용까지 하실 수 있을 것 같습니다. 

반응형

'Javascript' 카테고리의 다른 글

Javascript에서 윈도우 이모지(Windows Emoji) 체크하는 방법  (0) 2023.06.09
Javascript로 iframe에서 부모창 함수 제어하기  (0) 2022.06.16
Javascript 와 JQuery에서 iframe 내부 함수 접근 방법  (0) 2022.06.14
Javascript로 Html Title 변경해주기  (0) 2022.05.22
Javascript 문자열 자르는 함수 substr(), substring(), slice() 비교  (0) 2021.07.16
Javascript 소수점 올림, 버림, 반올림 함수 정리  (0) 2021.07.13
Javascript 랜덤값(난수) 생성하기  (0) 2021.04.15
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함