고정 헤더 영역
상세 컨텐츠
본문
반응형
자바스크립트를 이용해서 영어 키보드를 구현하도록 하겠습니다. (다음 포스팅은 한글 키보드..)
물론 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 로,
모바일 환경에서는 불가능하다는 판단을 내렸고, 태블릿 정도까지는 갈 수 있다고 판단됩니다.
'FrontEnd > JavaScript' 카테고리의 다른 글
| [ Html, Css, Javascript ] Spinner / Loading Screen 만들기 / 로딩 화면 만들기 (0) | 2021.10.06 |
|---|---|
| [ jQuery ] jQuery 제이쿼리 CDN 링크 공유 (0) | 2021.10.06 |
| [ JavaScript ] 드림코딩 클론코딩, 짧고 간단한 쇼핑 웹앱 구현, 예제 (0) | 2021.09.09 |
| [ JavaScript ] Split 예제, 자바스크립트 문자열 나누기 (0) | 2021.09.06 |
| [ JavaScript ] 버튼 클릭 복사 - 기능 구현 예제 (0) | 2021.08.26 |
댓글 영역