[ JavaScript ] 키보드 구현

FrontEnd/JavaScript

[ JavaScript ] 키보드 구현 - cdn 사용하기

SangHoonE 2021. 8. 31. 14:28

자바스크립트를 이용해서 영어 키보드를 구현하도록 하겠습니다. (다음 포스팅은 한글 키보드..)

물론 cdn을 이용해서 기본 키보드에서 좀 더 꾸며진 모습을 확인할 수 있습니다.

head태그 내에 넣을 내용

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
</head>

body 태그 내에 작성할 내용

<body>
    <input class="input" placeholder="Tap on the virtual keyboard to start" />
    <div class="simple-keyboard"></div>
  
    <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
    <script src="src/index.js"></script>

    <script>
        const Keyboard = window.SimpleKeyboard.default;

        const myKeyboard = 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);
        }

    </script>
</body>

확인해보니 최소 px의 가로길이는 500px 로,

모바일 환경에서는 불가능하다는 판단을 내렸고, 태블릿 정도까지는 갈 수 있다고 판단됩니다.

저작자표시 (새창열림)