개인화되고 강력한 Jquery 가상 키보드 만들기(VirtualKeyboard)

최근 프로젝트에서 저는 웹페이지의 프런트엔드를 담당했습니다. 고객은 외부 마우스와 키보드 없이 터치스크린을 사용해야 했지만 숫자를 포함한 텍스트를 입력할 수 있어야 했습니다. , 영어, 중국어. 고민 끝에 가상 키보드를 구현하기 위해 JS를 사용하기로 결정했습니다.

우선 인터넷에서 JS 가상 키보드를 검색해 본 후, 강력한 JS 가상 키보드 플러그인인 VirtualKeyboard에 반했습니다.

VirtualKeyboard를 간략하게 소개하겠습니다. 100개 이상의 내장 키보드 레이아웃, 200개 이상의 입력 방법, 9가지 옵션 스킨 플랜 세트가 있으며 자체 구축된 입력 방법을 지원합니다.

다운로드 주소를 먼저 첨부하세요. 최신 버전은 3.94입니다: http://www.corallosoftware.it/Download/download.html 이 튜토리얼은 3.71을 사용하며 별도의 다운로드를 제공하지 않습니다. 필요하면 기사 끝 부분에서 수정된 버전을 다운로드할 수 있습니다

다운로드한 후 먼저 데모 문서를 확인한 다음 Jsvkjscriptsdemo_inline.html을 열면 가상 키보드가 매우 아름답고 중국어 병음 입력을 지원하는 것을 볼 수 있는데 이는 기대와 완전히 일치합니다. 아래와 같이:

프로젝트에 통합해서 그냥 해보세요!

먼저 Jsvkjscripts 디렉터리에 있는 파일을 프로젝트에 복사하세요. 텍스트 파일과 html 데모 파일은 삭제할 수 있습니다.

프로젝트 페이지에서 참조된 JS 파일:

코드 복사 코드는 다음과 같습니다.

설명: vk_layout=CN 중국어 간체는 기본 입력 방법이 중국어 간체로 설정되어 있음을 의미합니다.

vk_skin=plat_gray는 flat_gray가 기본 스킨으로 선택되었음을 의미합니다. 이 두 가지는 개인적인 필요에 따라 설정할 수 있습니다.

가상 키보드 호출/숨기기 기능:

VirtualKeyboard.toggle("txt_Search", "소프트키");
txt_Search는 텍스트 상자의 ID이고, 소프트키는 가상 키보드가 표시되는 요소의 ID입니다.

다음은 간단한 예입니다.

코드 복사 코드는 다음과 같습니다.

~ ~

효과:

필요한 기능을 단계별로 맞춤설정하세요

기본 기능은 구현되었으며 다음 단계는 중국어와 영어 간 전환입니다. 먼저 CapsLock을 눌러 대문자로 전환해서 시도해 보았는데 중국어 모드에서 대문자로 전환해도 입력이 여전히 중국어로 나오네요. 오른쪽 하단의 입력방법 선택 메뉴를 클릭하여 US를 찾아 영어 입력방법으로 전환만 가능합니다. 이것은 불가능합니다. 매번 수백 가지 옵션 사이를 전환해야 합니다. 정말 좋지 않은 사용자 경험입니다!

그래서 예비 아이디어를 갖고 드롭다운 목록을 지우고 수동으로 중국어와 영어 옵션만 포함된 목록을 만들었습니다. 드롭다운 목록을 지우려면 우선 해당 레이어의 ID를 알아야 합니다. 이런 레이어는 보통 동적으로 생성되기 때문에 Jsvkjscriptsvirtualkeyboard.js를 찾아서 열어보니 역시 코드가 압축되어 있어 바로 읽을 수 있습니다. 따라서 먼저 압축을 풀어야 합니다. http://jsbeautifier.org/를 열고 JS 파일의 코드를 입력 상자에 복사한 후 버튼을 클릭하면 압축 해제가 완료됩니다. ctrl a, ctrl c를 사용하여 새 JS 파일에 복사하면 읽을 수 있습니다. "

"" ""
kb_mappingselector는 키보드 레이아웃 선택 상자의 ID이고, kb_langselector는 입력 방법 선택 상자의 ID이며, kb_langselector는 우리가 원하는 ID입니다.

ID로는 수정이 가능하기 때문에 생성이 완료된 후에만 ID를 얻을 수 있기 때문에 가상 키보드를 로딩한 후에 코드를 작성했습니다.

다음 코드는 JQuery 프레임워크를 사용하므로 참조가 필요하므로 정상적으로 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 테스트(){

$("#kb_langselector").empty().append("English中文
VirtualKeyboard.switchLayout(this.value); false 반환;

});

}

테스트 후 로딩이 10%에서 중단되고 페이지에 JS 오류가 발생하는 문제를 발견했습니다.

오류 설명을 보면 제가 만든 옵션에 문제가 있는 것으로 추측했지만, 여러 번 추적하고 디버깅한 후에도 구체적인 문제를 찾을 수 없었던 영웅이 오류를 발견하면 알려주시면 감사하겠습니다. !

오랜 시간 지속되는 오류가 발생하면 생각을 바꿔보세요!

초기 아이디어가 실패해서 마음을 바꿨습니다. 제가 만든 것에 문제가 있었기 때문에 직접 만들 수는 없지만 추가 항목은 필요하지 않습니다.

이 아이디어에 따라 로딩 코드를 다시 연구한 결과 입력 방식으로 로드된 JS가 Jsvkjscriptslayoutslayouts.js에 정의되어 있음을 발견했습니다. 그래서 중복되는 옵션은 과감히 삭제하고 중국어 병음과 미국식 두 가지 옵션만 남겨 두었습니다. 수정 후의 렌더링은 다음과 같습니다. 중국어와 영어 두 가지 옵션만 있어 훨씬 깔끔합니다.

내가 원하는 건 이런 게 아니야!

중국어와 영어 간 전환이 구현되었지만 조작이 충분히 편리하지 않습니다. 필요한 것은 키보드에 전환 키를 추가하는 것입니다.

먼저 스킨 파일인 Jsvkjscriptscssplat_graybutton_set.png를 찾아서 버튼을 직접 추가해보겠습니다!

원본 사진 :

수정 후:

그림을 바꾸는 것만으로는 충분하지 않습니다. 버튼은 스타일 시트에 위치하며 계속해서 스타일 시트를 수정합니다! 스타일 시트 Jsvkjscriptscssplat_graykeyboard.css 끝에 다음 코드를 추가합니다.

코드 복사 코드는 다음과 같습니다.

#kbDesk div#kb_binput_method {

플로트: 그렇죠;

너비: 102px;

}

#kbDesk div#kb_binput_method a {

        배경 위치: -453px 0px;

}

#kbDesk div#kb_binput_method.kbButtonHover a {

        배경 위치: -453px -38px;

}

#kbDesk div#kb_binput_method.kbButtonDown a {

        배경 위치: -453px -76px;

}

다음으로 JS 파일에서 버튼에 대한 이벤트를 정의해야 합니다. virtualkeyboard.js를 열고

를 찾으세요.

코드 복사 코드는 다음과 같습니다.

변수 C = {

'백스페이스',

'탭',

'입력',

'대문자',

'shift_left',

'shift_right',

'델',

'ctrl_left',

'alt_left',

'공간',

'alt_right',

'ctrl_right'

};

아래에 59: 'input_method'를 추가하세요. 'ctrl_right' 뒤에 쉼표를 추가하는 것을 잊지 마세요. 수정 후:

코드 복사 코드는 다음과 같습니다.

변수 C = {

'백스페이스',

'탭',

'입력',

'대문자',

'shift_left',

'shift_right',

'델',

'ctrl_left',

'alt_left',

'공간',

'alt_right',

'ctrl_right',

'입력_방법'

};

계속해서 버튼 클릭 응답 코드 찾기:

코드 복사 코드는 다음과 같습니다.

var d = 함수 (i) {

        var e = DOM.getParent(i.srcElement || i.target, 'a');

        if (!e || e.parentNode.id.indexOf(Q) < 0) return;

        e = e.parentNode;

        var iI = X;

        var il = e.id.substring(Q.length);

        스위치(il) {

            케이스 "대문자":

                iI = iI ^s;

                휴식;

            케이스 "shift_left":

            케이스 "shift_right":

                if (i.shiftKey) break;

                iI = iI ^ Z;

                휴식;

            케이스 "alt_left":

            케이스 "alt_right":

            케이스 "ctrl_left":

            케이스 "ctrl_right":

                iI = iI ^ (i.altKey 
                휴식;

            기본값:

                if (_) DOM.CSS(e).addClass(y.buttonDown);

                휴식

        }

        if (X != iI) {

            B(iI);

            b();

        }

        i.preventDefault();

        i.stopPropagation();

    };

　　修改为：

复主代码代码如下:

var d = 함수 (i) {
        var e = DOM.getParent(i.srcElement || i.target, 'a');
        if (!e || e.parentNode.id.indexOf(Q) < 0) return;
        e = e.parentNode;
        var iI = X;
        var il = e.id.substring(Q.length);
        스위치(il) {
            케이스 "대문자":
                iI = iI ^s;
                휴식;
            케이스 "input_method":
                if (document.getElementById("kb_langselector").value == '미국 미국') {
                    VirtualKeyboard.switchLayout("CN 중국어 간체 병음");

                }
                그렇지 않으면 {
                    VirtualKeyboard.switchLayout("미국 미국");

                }
                휴식;
            케이스 "shift_left":
            케이스 "shift_right":
                if (i.shiftKey) break;
                iI = iI ^ Z;
                휴식;
            케이스 "alt_left":
            케이스 "alt_right":
            케이스 "ctrl_left":
            케이스 "ctrl_right":
                iI = iI ^ (i.altKey                 휴식;
            기본값:
                if (_) DOM.CSS(e).addClass(y.buttonDown);
                휴식
        }
        if (X != iI) {
            B(iI);
            b();
        }
        i.preventDefault();
        i.stopPropagation();
    };