JQuery EasyUI 폼 컴포넌트에 포커스 전환 기능을 추가한 공유 예시
- 小云云원래의
- 2018-01-17 16:35:331647검색
이 글에서는 JQuery EasyUI 양식 구성 요소에 포커스 전환 기능을 추가하는 방법을 주로 설명합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
1. 배경 설명
JQuery EasyUI의 각 폼 구성 요소를 사용할 때 요소의 포커스가 전환되면 실제 클라이언트 페이지 요소가 생성되지만 Tab 키는 정상적으로 사용할 수 있지만 순서 제어 속성은 다음과 같습니다. tabindex가 작동하지 않습니다. 페이지에 표시된 요소가 생성되고 tabindex 속성이 없으며 실제 요소가 숨겨져 있기 때문입니다. 이 기사에서는 사용자 정의 기능을 사용하여 Tab 및 Enter 키의 포커스 전환 기능을 구현합니다.
2. 기능 정의
창 클릭을 캡처하여 Enter 및 Tab 키에서 핫스팟 전환 처리가 수행됩니다. 먼저, 현재 포커스에 따라 필요한 tabindex 속성을 구하고, 다음 포커스 요소의 속성값에 1을 더하고, 이 속성을 기반으로 다음 포커스 요소를 찾아 포커스로 설정한다.
//增加改变焦点操作
function addChangeFocusOpe()
{
$(window).keydown(function(event){//按键事件
if(event.keyCode==13 || event.keyCode==9) //回车 或 tab键
{
var tabindex = $($(':focus').parent()[0]).prev().attr("tabindex"); //取（当前焦点--父元素--前一元素）的 tabindex 属性。该结构根据jQuery EasyUI生成的页面结构而定。
if(tabindex != undefined)
{
var nextIndex = parseInt(tabindex) + 1; //下一焦点元素tabindex编号
var nextInput = $("input[tabindex='"+nextIndex+"']"); //查找下一焦点元素
if(nextInput.length > 0);
{
var nextObj = $(nextInput[0]);
var options = nextObj.attr("data-options"); //设置的属性值，用于判断是否是“文本区域”
var focusObj = $(nextInput[0]).next('span').find('input'); //元素--下一span元素 --内部input。该结构根据jQuery EasyUI生成的页面结构而定
if(options.indexOf("multiline:true") != -1)
{//要设置焦点的元素是“文本区域”
focusObj = nextObj.next('span').find('textarea');
}
focusObj.focus(); //设置焦点
}
}
}
if(event.keyCode==9)
{//对于tab键，则取消其本有功能，因为上面已完成焦点转换
return false;
}
});
}
3. 사용 방법
(1) 페이지에서 함수 호출
$(function(){
$('#code').next('span').find('input').focus(); //第一个元素设置焦点
addChangeFocusOpe(); //页面增加焦点切换操作
});
(2) 양식 요소의 tabindex 속성 설정
4 제약 및 제한 사항
, tabindex는 +1 방법을 채택합니다. 페이지에서 tabindex 속성을 설정할 때 연속적이어야 합니다. 그렇지 않으면 불연속적인 위치에서는 작동하지 않습니다.
관련 추천 :
JavaScript 포커스 전환 입력_javascript 기술
Jquery-based 탭으로 입력 포커스 전환 효과 코드(Enter To Tab)_jquery
자바스크립트에서 포커스가 텍스트 상자에 들어갈 때 입력 닫기 공유 메소드 구현을 위한 핵심 코드
위 내용은 JQuery EasyUI 폼 컴포넌트에 포커스 전환 기능을 추가한 공유 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!