가상키보드 설치

webPonent VirtualKey 1.0 Installation

 

지원환경

서버환경Java [ jdk1.5, jdk1.6, jdk1.7 ]

PC 환경

IE8이상 / Chrome / FireFox / Safari / Opera
안드로이드 환경2.2 Froyo 이상
IOS 환경4.2.1 이상

기능정의

입력모드QWERTY / CLONE / HONEY / NUMBER

입력방식

TOUCH / SWIPING

테마색상

WHITE / BLACK / BLUE / GREEN 등
배치방식모바일의 경우 양손 / 왼손 / 오른손 모드로 변경가능하며, 가로 / 세로 모드에 맞춤 구성으로 자동 변경

첨부파일

  • keypad

    • js
      • keypad.js  [ 초기화에 필요한 설정값이나 외부 API가 정의된 소스 ]
    • theme [ 각종테마 리소스 ]
      • black01
      • black02
      • .
      • .
    • keypad-core.html [ 내부 API가 정의된 소스 ] [ 개발자 참조 불필요 ]
  • WEB-INF
    • lib
      • eltz-keypad.jar
    • web.xml
    • webPonent.virtualKey.license [ 라이센스 키 ]
    • README [ 라이센스 정보 ]

설치

  1. keypad 디렉토리를 프로젝트내에 원하는 경로(A)에 복사   ex ) WebContent/keypad 경로에 복사
  2. keypad.js 파일내에 KEYPAD_HOME 변수에 (A)값을 절대경로로 입력 
  3. keypad.js 파일내에 KEYPAD_CONTEXT_ROOT 변수에 컨텍스트 루트 값을 입력 
  4. web.xml 서블릿 추가 (EltzKeypadServlet)
  5. 라이브러리 경로에 eltz-keypad.jar 추가
  6. WEB-INF 경로에 라이센스 파일 (webPonent.virtualKey.license) 추가

keypad.js 설정값 변경truejs7
var KEYPAD_HOME  = '/keypad';
var KEYPAD_CONTEXT_ROOT = '/';
.
.
 
web.xml 서블릿 추가xml1
	<servlet>
        <servlet-name>EltzKeypadServlet</servlet-name>
        <servlet-class>eltz.apps.keypad.VirtualPadServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>EltzKeypadServlet</servlet-name>
        <url-pattern>/EltzKey/*</url-pattern>
    </servlet-mapping>
webPonent.virtualKey.license (WEB-INF)js1
1UlHEGwgYLboGw5+1gB/rw8WT2XR5llyrNWame1PgKtcu9XLiZDrMLurTEu8Juq2

초기화

페이지에 meta 정보 입력xml1
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
페이지에 keypad.js 정의js1
<script type="text/javascript" src="./js/keypad.js"></script>
input 요소에 data-security 설정xml1
<form>
	<input type="password" placeholder="QWERTY Password" id="pwd1" name="pwd1" data-security="qwerty" maxlength="13" />
	<input type="password" placeholder="NUMBER Password" id="pwd2" name="pwd2" data-security="number" maxlength="13" />
</form>
초기화 스크립트js1
CIPAD.setupVpad(document.forms, {
            icon : true, // true이면 input요소 오른쪽에 (키보드,마우스(가상) 선택 아이콘) 배치 (default true)
            inputMode : 'mouse', //기본 입력모드 선택 (mouse(가상) OR keyboard)
            securityMode : false, // true 이면 모바일 경우에 키보드 클릭시 랜덤한 다른키가 눌려지는 이펙트 추가 (default true)
            configMode : true, // 배치모드,입력모드 변경을 위한 설정 버튼 노출 여부 (default true)
            theme : 'black01' //black01 테마 사용
        });