자동 포커스 이동 - jQuery Auto Tab

웹 프로그래밍에서 주민등록번호 입력등에서 처럼 앞의 여섯자리를 입력하면 포커스가 자동으로 뒷자리로 이동하는 기능을 많이 요구 합니다. 일반적인 홈페이지에는 이러한 요구사항이 거의 없지만 업무용화면에서 코드성 데이터를 많이 입력하는 경우 아직도 마우스를 사용하는 선택박스보다 키보드 입력을 선호하는 곳이 많습니다.

 

이런곳에서는 데이터의 길이가 일정한 경우가 많으므로 하나의 입력필드에 데이터 입력이 완료되면 다음 입력필드로 자동으로 포커스가 이동하기를 바랍니다. 이러한 기능을 쉽게 구현할 수 있도록 해주는 jquery.autotab.js 에 대해서 알아보겠습니다.

 

기능을 알아보기 전에 이 라이브러리를 사용하는데 있어 문제가 될 수 있는 세 가지 참고 사항에 대해 예기해 보겠습니다.

 

첫 번째는 웹 접근성과 관련된 문제 입니다. 입력필드를 다 채우면 자동으로 포커스를 이동하는 것은 사용자가 예측할 수 없는 포커스의 이동이 발생하지 않아야 한다는 지침에 위반이 될 수 있습니다.

 

또 다른 해석으로는 포커스가 자동 이동하는 기능은 maxlength를 참조하기 때문에 shift + tab 으로 뒤로 이동할 경우 다시 앞으로 이동해 버리는 문제점이 발생한다는 것인데, jquery.autotab.js 는 이러한 현상이 발생하지 않습니다.

 

자동 포커스 이동에 대해서 웹 접근성 관점에서는 논란의 소지가 좀 있는것 같습니다. 써도 되는지 안되는지 좀 애매합니다.

 

웹 접근성에 관련된 지침들도 항상 동일한 것이 아니라, 시간이 지나면서 조금씩 바뀌어 가는것 같습니다.  항상 새로운 정보를 찾아보고 공부하는 마음을 가져야 할것 같습니다.

 

다음 사이트를 참고 하시면 도움이 되실 것입니다. (웹 접근성 연구소 - http://www.wah.or.kr) 어떻든 웹 접근성 관점에서 자동 포커스  이동을 쓸지 말지는 사용하는 분이 고민해야 할 부분 같습니다.

 

두 번째는 한글을 입력할 경우 자동 탭 기능이 동작을 하지 않는다는 것입니다. 숫자, 알파벳 입력만 할때도 한글 입력 모드 일경우 한글이 입력 되어 버리는 문제가 있습니다. 현재 이것을 막을 뚜렷한 방법은 없는것 같습니다.

 

IE인 경우에는 style="ime-mode:disabled;"로 지정해서 한글 입력을 아예 막을 수 있지만, 크롬과 같은  webkit 브라우저에서는 ime-mode 를 지원하지 않습니다. 표준이 될거라는 예기는 오래전부터 나왔었는데 아직은 표준이 아닙니다.

 

세 번째는 이 라이브러리는 백 스페이스를 누르면 입력 필드의 내용을 하나씩 지우다가 모두 지운상태에서 백스페이스가 입력되면 이전 요소로 포커스가 이동합니다. 이 기능은 사용자에 따라 상당히 불편할 수 있습니다.

 

일반적으로 입력필드 내의 데이터를 백 스페이스로 지울 경우 다 지우고도 입력필드를 벗어나지 않기 때문에 입력된 갯수 만큼만 백스페이스를 누르는 것이 아니라 다다닥 하고 여러번 누르게 됩니다. 이런 습관이 있는경우 이 라이브러리를 사용하면 상당히 짜증을 유발할 수 있습니다.

 

백스페이스 기능을 중지하는 설정은 존재하지 않는것 같습니다. 이 기능을 제거할 필요가 있다면 소스에서 백 스페이스 이벤트 부분을 직접 주석 처리하고 사용하면 될 것입니다.

 

※ 참고

ime-mode : 웹에서 입력필드의 한글 영어 입력을 제어할 수 있습니다. IE에서만 동작을 하며, style="ime-mode:active;" 와 같이 사용합니다. ime-mode에서 사용할 수 있는 속성은 다음과 같습니다.

 

* auto : 기본값. 아무것도 지정 안하면 이 속성 입니다.

* active : 포커스가 들어가자마자 한글 입력 모드로 바뀝니다.

* inactive : 포커스가 들어가자마자 영어 입력 모드로 바뀝니다.

* disabled : 한글 입력이 되지 않게 합니다.

 

jquery.autotab.js 를 다운로드 받을 수 있는 곳입니다.

 

https://github.com/Mathachew/jquery-autotab

 

다음 사이트는 데모를 제공하는 곳 입니다.

 

http://autotab.mathachew.com/

 

jquery.autotab.js 라이브러리는 MIT 라이센스로 배포 됩니다.

 

 

 

아래와 같은 기능이 제공됩니다. 더 많은 커스터마이징 기능은 데모 사이트를 참조하시기 바랍니다.

 

* 입력 값이 maxlength 에 도달했을 때 자동으로 다음 입력필드로 포커스를 옮기는 기능을 해줍니다.

* 입력 필드에 들어 오는 값을 필터링하여 숫자, 알파벳, 알파벳 또는 숫자만 입력될 수 있도록 해주는 기능 및 커스텀 필터를 사용할 수 있는 기능을 제공합니다.

* jquery 선택자를 사용하여 기능을 붙일 입력 필드를 선택할 수 있습니다.

* 특정 문자가 입력될 때 탭 기능이 트리거 되도록 할 수 있습니다.(예 IP 입력시 마침표가 입력되면 탭이 되도록함.)

* 필터링 되는 포맷과 이동할 요소를 수동으로 지정할 수 있습니다.

* 프로그램적으로 오토탭 기능을 시작/중지 하거나 특정 요소의 기능을 제거할 수 있습니다.

* 백 스페이스 키를 누르면 현재 입력필드의 내용을 하나씩 지우고, 모두 지운 상태에서 다시 백 스페이스를 입력하면 이전 요소로 자동으로 포커스가 이동합니다.

 

 

간단한 사용법을 알아 보겠습니다.

 

필요한 라이브러리를 포함 합니다. jQuery 기반이므로  jQuery도 필요합니다. Github에는 jQuery 1.7+ 과 2.x 에서 동작한다고 되어 있는데, 3.1.1 에서 테스트한 결과 잘 동작하였습니다.

 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery.autotab.js"></script>

 

필요한 기능을 설정합니다.

 

<script type="text/javascript">
//<![CDATA[
$(function () {
	$.autotab({ tabOnSelect: true });
	$('.number').autotab('filter', 'number');
	$('.text').autotab('filter', 'text');
	$('.alpha').autotab('filter', 'alpha');
	$('.alphanumeric').autotab('filter', { format: 'alphanumeric', uppercase: true });
	$('#regex').autotab('filter', { format: 'custom', pattern: '[^0-9\.]', maxlength: 15 });
	$('.ip').autotab('filter', { format: 'number', trigger: '.' });
});
//]]>
</script>

 

* $.autotab({ tabOnSelect: true }) : 자동 탭 이동시 필드내의 컨텐츠가 모두 선택된 상태가 됩니다.

* $('.number').autotab('filter', 'number') : class="number"로 지정된 필드에 숫자만 입력될 수 있게 합니다.

* $('.text').autotab('filter', 'text') : class="text" 로 지정된 필드에 문자만 입력될 수 있게 합니다.

* $('.alpha').autotab('filter', 'alpha') : class="alpha" 로 지정된 필드에 알파벳만 입력될 수 있게 합니다.

* $('.alphanumeric').autotab('filter', { format: 'alphanumeric', uppercase: true }) : class="alphanumeric" 으로 지정된 필드에 대문자 알파벳과 숫자만 입력할 수 있게 합니다.

* $('#regex').autotab('filter', { format: 'custom', pattern: '[^0-9\.]', maxlength: 15 }) : class="regex" 로 지정된 필드에 정규식을 사용하여 입력을 제어할 수 있습니다.(여기서는 0-9와 마침표(.) 가 입력가능하고 최대 15자 까지 입력가능합니다.)

* $('.ip').autotab('filter', { format: 'number', trigger: '.' }) : class="ip" 로 지정된 필드에 숫자만 입력가능한데, 마침표를 입력하면 다음 필드로 자동 탭이 되게 합니다.

 

 

다음 예는 버튼을 클릭하면 input type이 "text"인 모든 필드에서 자동 탭 기능을 제거하는 코드 입니다.

 

$('#remove-autotab').on('click', function () {
	$('input[type=text]').autotab('remove');
});

<button id="remove-autotab">Turn Off</button>

 

지금까지 jquery.autotab.js의 간단한 사용법을 알아보았습니다. 자세한 사용법은 데모 사이트를 참고 하시기 바랍니다.