github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-03-04 00:12:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding editable CodeSandbox examples

Browse Source
This commit is contained in:
Francisco Hodge 2018-05-30 22:28:51 -04:00
parent cbef48eb3c
commit 894483e6a7
3 changed files with 58 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
README.md
View File

@ -3,14 +3,10 @@
[![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard) [![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)
<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard.png" align="center"></a> <a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard.png" align="center"></a>
> An easily customisable and responsive on-screen virtual keyboard for Javascript projects. > An easily customisable and responsive on-screen virtual keyboard for Javascript project.
> Want the React.js version? Get [react-simple-keyboard](https://www.npmjs.com/package/react-simple-keyboard) instead!
<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/keyboard.png" align="center" width="100%"> <img src="https://franciscohodge.com/project-pages/simple-keyboard/images/keyboard.png" align="center" width="100%">
<b>[Live Demo](https://franciscohodge.com/simple-keyboard/demo)</b>
## Installation ## Installation
@ -32,36 +28,30 @@
import Keyboard from 'simple-keyboard'; import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css'; import 'simple-keyboard/build/css/index.css';
class App { let keyboard = new Keyboard({
constructor(){
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
}
onDOMLoaded = () => {
this.keyboard = new Keyboard({
onChange: input => this.onChange(input), onChange: input => this.onChange(input),
onKeyPress: button => this.onKeyPress(button) onKeyPress: button => this.onKeyPress(button)
}); });
}
onChange = input => { function onChange(input){
document.querySelector(".input").value = input;
console.log("Input changed", input); console.log("Input changed", input);
}
onKeyPress = button => {
console.log("Button pressed", button);
}
} }
export default App; function onKeyPress(button){
console.log("Button pressed", button);
}
```` ````
### html ### html
````html ````html
<input class="input" />
<div class="simple-keyboard"></div> <div class="simple-keyboard"></div>
```` ````
[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)
> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js). > Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).
## Usage from CDN ## Usage from CDN
@ -69,32 +59,54 @@ export default App;
### html ### html
````html ````html
<!DOCTYPE html> <html>
<html lang="en">
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/css/index.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/css/index.css">
</head> </head>
<body> <body>
<input class="input" placeholder="Tap on the virtual keyboard to start" />
<div class="simple-keyboard"></div> <div class="simple-keyboard"></div>
<script src="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/index.js"></script>
<script> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
function keyboard_onChange(input){ <script src="src/index.js"></script>
</body>
</html>
````
### js (index.js)
````js
window.require.config({
paths: {
"keyboard": "https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/index"
}
});
window.require(["keyboard"],
function (SimpleKeyboard) {
let Keyboard = SimpleKeyboard.default;
let myKeyboard = new Keyboard({
onChange: input => onChange(input),
onKeyPress: button => onKeyPress(button)
});
function onChange(input) {
document.querySelector(".input").value = input;
console.log("Input changed", input); console.log("Input changed", input);
} }
function keyboard_onKeyPress(button){ function onKeyPress(button) {
console.log("Button pressed", button); console.log("Button pressed", button);
} }
}
var myKeyboard = new Keyboard({ );
onChange: input => keyboard_onChange(input),
onKeyPress: button => keyboard_onKeyPress(button)
});
</script>
</body>
</html>
```` ````
[![Edit 6n0wzxjmjk](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6n0wzxjmjk)
## Options ## Options
You can customize the Keyboard by passing options to it. You can customize the Keyboard by passing options to it.
@ -329,10 +341,10 @@ For example:
<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/demo.gif" align="center" width="600"> <img src="https://franciscohodge.com/project-pages/simple-keyboard/images/demo.gif" align="center" width="600">
### Live demo
[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo) [https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)
[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)
### To run demo on your own computer ### To run demo on your own computer
* Clone this repository * Clone this repository

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "simple-keyboard", "name": "simple-keyboard",
"version": "2.0.0", "version": "2.1.5",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "simple-keyboard", "name": "simple-keyboard",
"version": "2.1.5", "version": "2.1.6",
"description": "On-screen Virtual Keyboard", "description": "On-screen Virtual Keyboard",
"main": "build/index.js", "main": "build/index.js",
"scripts": { "scripts": {