Jquery는 포커스를 전환하기 위해 Enter 키를 구현합니다.

기본적으로 시스템은 Tab 키를 사용하여 페이지 요소의 초점을 전환합니다. Enter 키로도 이 기능을 수행하고 좋은 사용자 경험을 제공할 수 있다고 생각한 적이 있습니까? 다음으로 Jquery를 사용하여 포커스를 전환하는 Enter 키를 구현합니다. 이 코드는 일반적으로 사용되는 브라우저 IE7, IE8, Firefox 3, Chrome 2 및 Safari 4에서 테스트되었습니다.

사용된 개발 도구는 Microsoft VS2010+Jquery 프레임워크입니다.

구현 단계는 다음과 같습니다

1. 먼저 Jquery 클래스 라이브러리를 참조하세요.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

2. 자바스크립트 코드

<스크립트 유형="텍스트/자바스크립트">
$(함수 () {
$('입력:텍스트:첫 번째').focus();
var $inp = $('입력:텍스트');
$inp.bind('keydown', 함수 (e) {
var key = e.which;
if (키 == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>

분석하다 :

$('입력:텍스트:첫 번째').focus();

페이지가 초기화되면 포커스는 첫 번째 텍스트 상자에 위치합니다.

var $inp = $('입력:텍스트');

type=텍스트 상자 요소 컬렉션을 가져옵니다.

$inp.bind('keydown', 함수 (e) {}

'keydown' 이벤트를 텍스트 상자 컬렉션에 바인딩

var key = e.which;

Enter 키 값 = 13과 같이 현재 누른 키 값을 가져옵니다.

e.preventDefault();

기본 동작이 발생하는 것을 방지하고 다른 일이 발생하는 것을 여기서는 PostBack 발생을 방지하고 대신 포커스를 전환합니다. 또 다른 유사한 방법은 js 이벤트가 버블링되는 것을 방지하는 stopPropagation입니다.