[Vue.js] virtual keyboard - Simple-keyboard 사용법

가상 키보드를 찾는 중, 의존성 없이 사용할 수 있는 Simple-keyboard를 발견했습니다.

간단하게 사용할 수 있는 점이 장점이지만 한글 키보드는 미흡합니다.

 

---

 

1. Simple-keyboard download & documentation

https://virtual-keyboard.js.org/vuejs/

Simple-keyboard - Javascript Virtual Keyboard

 

 

2. installation

npm install simple-keyboard --save

 

- npm install을 하여 간단하게 설치하면 됩니다.

- 혹은 zip 파일을 다운로드할 수 있습니다.

 

 

3. 간단한 사용법

 

3-1. html 파일

<input class="input" />
<div class="simple-keyboard"></div>

 

 

3-2. javascript 파일

import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css';

const keyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button)
});

function onChange(input){
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
}

function onKeyPress(button){
  console.log("Button pressed", button);
}

 

 

4. 활용 예제

- 두 개의 input 창에 각각 입력할 수 있도록 변형했습니다.

- keyboard 부분을 따로 분리하여 만든 코드입니다.

 

4-1. 부모 vue 화면 (Login.vue)

 

- html 부분

<template>
  <div id="login-component">
    <div class="modal-card">
      <img class="close-btn" src="~/btn_close.png" @click="$emit('close-modal')" />
      <div class="input-area">
        <div class="login-input">
          <label for="inputNum">회원번호</label>
          <input type="text" id="inputNum" value="" @focus="onInputFocus" @input="onInputChange" />
        </div>
        <div class="login-input">
          <label for="inputPass">비밀번호</label>
          <input type="password" id="inputPass" value="" @focus="onInputFocus" @input="onInputChange" />
        </div>
      </div>
      <div class="btn-area">
        <button class="login-btn">로그인</button>
      </div>
      <div class="keybaord-area">
        <SimpleKeyboard
          @onChange="onChange"
          @onKeyPress="onKeyPress"
          :input="inputName"
          :inputName="inputName"
        ></SimpleKeyboard>
      </div>
    </div>
  </div>
</template>

- 위의 코드는 로그인 화면 예제입니다.

- 회원번호와 비밀번호를 virtual keyboard를 이용해 입력하도록 했습니다.

 

 

- javascript 부분

import SimpleKeyboard from "./SimpleKeyboard";

export default {
  name: "login-component",
  components: {
    SimpleKeyboard
  },
  props: {
    programKey: Number
  },
  data: () => ({
    inputName: "inputNum"
  }),
  methods: {
    onChange(input, inputName) {
      console.log("change", inputName, input);
      document.getElementById(inputName).value = input;
    },
    onKeyPress(button) {},
    onInputChange(input) {},
    onInputFocus(input) {
      this.inputName = input.target.id;
    }
  }
};

- input의 내용이 바뀔 때마다 해당 내용을 console.log를 이용해 출력했습니다.

 

 

4-2. SimpleKeyboard.vue

 

- html 부분

<template>
  <div :class="keyboardClass"></div>
</template>

 

 

- javascript 부분

import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";

export default {
  name: "SimpleKeyboard",
  props: {
    keyboardClass: {
      default: "simple-keyboard",
      type: String
    },
    input: {
      type: String
    },
    inputName: {
      type: String
    }
  },
  data: () => ({
    keyboard: null
  }),
  mounted() {
    this.keyboard = new Keyboard(this.keyboardClass, {
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
      inputName: this.inputName
    });
  },
  methods: {
    onChange(input) {
      this.$emit("onChange", input, this.inputName);
    },
    onKeyPress(button) {
      this.$emit("onKeyPress", button);

      if (button === "{shift}" || button === "{lock}") this.handleShift();
    },
    handleShift() {
      let currentLayout = this.keyboard.options.layoutName;
      let shiftToggle = currentLayout === "default" ? "shift" : "default";

      this.keyboard.setOptions({
        layoutName: shiftToggle
      });
    }
  },
  watch: {
    inputName(inputName) {
      this.keyboard.setOptions({ inputName });
    }
  }
};

- simple-keyboard를 import 해준 후, keyboard라는 값을 data에 선언했습니다.

- keyboard에 new Keyboard 객체를 선언해 가상 키보드를 만들었습니다.

 

- onChange와 onKeyPress는 emit으로 로그인 화면에 값을 넘겨줍니다.

- 만약 shift 키나 Caps 버튼을 누르면 특수문자와 영어 대문자를 보여줍니다.

 

 

5. 활용 예제 키보드 모습

 

기본 키보드 모습

 

 caps나 shift 키를 누른 모습

 

 

 

이상으로 가상 키보드 Simple-keyboard 예제를 다뤄보았습니다.

 

---