키보드 기본 가이드

이 화면은 키보드 샘플화면이다.

텍스트를 입력할 필드를 settargetfield API로 지정 후 letterkey API 등으로 입력한다.

키보드 컴포넌트를 사용하기 위해서는 hangul 라이브러리가 필요하다.

hangul 라이브러리 위치는 xframe5.js의 ENGINEURL 하위에 /ext/lib 디렉토리이다(기본경로: C:/xframe5/xf5/ext/lib/hangul.min.js).

템플릿 위치: /HTML5/COMPONENT/KEYBOARD/keyboard_basic

템플릿 파일

• keyboard_basic.xml
• keyboard_basic.js
• 새창으로 실행

function screen_on_load()
{
	var i, btn_length;

	// 텍스트를 입력할 필드 지정
	this.keyboard.settargetfield("fld");

	// 버튼키에 마우스업 이벤트 등록
	btn_length = this.btn.length;
	for (i = 0; i < btn_length; i++) {
		this.btn[i].registerevent("on_mouseup", "btn_on_mouseup(objInst)");
	}
}

function btn_on_mouseup(objInst, index)
{
	var btn_length, i;

	// 키 눌렀을때 필드에 포커스 처리
	this.fld.setfocus();

	// 버튼의 개수 구하기
	btn_length = this.btn.length;

	switch (index) {
		case 13: // Backspace 키 눌렀을때 처리
			this.keyboard.backspacekey();
			break;
		case 27: // Delete 키 눌렀을때 처리
			this.keyboard.deletekey();
			break;
		case 28: // 한/영 키 눌렀을때 처리
			// 한/영 키가 눌려 있을 경우(한글키로 변경)
		    if (objInst.getstatuspush()) {
				// Shift 키가 눌려 있는 경우
				if (this.btn[40].getstatuspush()) {
					for (i = 0; i < btn_length; i++) {
						this.btn[i].settext(this.keyboard.getshiftchar(this.btn[i].gettext()));
						this.btn[i].settext(this.keyboard.getengchar(this.btn[i].gettext()));
						this.btn[i].settext(this.keyboard.getshiftchar(this.btn[i].gettext()));
					}
				}
				else {
					for (i = 0; i < btn_length; i++) {
						this.btn[i].settext(this.keyboard.getengchar(this.btn[i].gettext()));
					}
				}

				// 한/영 키 눌림상태 false로 변경
				objInst.setstatuspush(false);
		    }
			// 영문 키로 변경
		    else {
				// Shift키가 눌려 있는 경우
				if (this.btn[40].getstatuspush()) {
					for (i = 0; i < btn_length; i++) {
						this.btn[i].settext(this.keyboard.getshiftchar(this.btn[i].gettext()));
						this.btn[i].settext(this.keyboard.getengchar(this.btn[i].gettext()));
						this.btn[i].settext(this.keyboard.getshiftchar(this.btn[i].gettext()));
					}
				}
				else {
					for (i = 0; i < btn_length; i++) {
						this.btn[i].settext(this.keyboard.getengchar(this.btn[i].gettext()));
					}
				}

				// 한/영 키 눌림상태로 변경
				objInst.setstatuspush(true);
		    }
			break;
		case 40: // Shift 키 눌렀을때 처리
		case 51:
			// 버튼 눌림 상태 변경
		    if (objInst.getstatuspush()) {
		        this.btn[40].setstatuspush(false);
				this.btn[51].setstatuspush(false);
		    }
		    else {
		        this.btn[40].setstatuspush(true);
				this.btn[51].setstatuspush(true);
		    }

			// Shift키 처리
			for (i = 0; i < btn_length; i++) {
				this.btn[i].settext(this.keyboard.getshiftchar(this.btn[i].gettext()));
			}
			break;
		case 52: // 초기화
			this.fld.settext("");
			break;
		default: // 문자 입력
			this.keyboard.letterkey(objInst.gettext());
			break;
	}
}