wusb / Digital Keyboard
Licence: mit
⌨️ Digital Keyboard 数字键盘
Stars: ✭ 275
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Digital Keyboard
LowLevelInput.Net
A thread safe and event driven LowLevelMouse and LowLevelKeyboard Hook
Stars: ✭ 32 (-88.36%)
Mutual labels: keyboard
Pancake
Lightweight, Fast, Easy-to-use HTML5 2D game framework!
Stars: ✭ 79 (-71.27%)
Mutual labels: keyboard
kiwi
Kiwi turns your Pimoroni Keybow into a fully customizable poor-man's Elgato Stream Deck!
Stars: ✭ 40 (-85.45%)
Mutual labels: keyboard
input-event
🎹 Read and parse input device(like mouse, keyboard, joystick and IR-Remote)'s event data.
Stars: ✭ 45 (-83.64%)
Mutual labels: keyboard
auto-keyboard
⌨这是一个半自动化的键盘操作解决方案，主要适用于需要完全键盘操作场景，比如大屏展示，电视，游戏菜单等，大大简化按键操作的逻辑。
Stars: ✭ 22 (-92%)
Mutual labels: keyboard
Cordova Plugin Native Keyboard
🎹 Add a Slack / WhatsApp - style chat keyboard to your Cordova app!
Stars: ✭ 271 (-1.45%)
Mutual labels: keyboard
rustyvibes
A Rust CLI that makes mechanical keyboard sound effects on every key press
Stars: ✭ 56 (-79.64%)
Mutual labels: keyboard
Chrysalis
Graphical configurator for Kaleidoscope-powered keyboards
Stars: ✭ 261 (-5.09%)
Mutual labels: keyboard
SwipeType
Implementing same algorithm "swype keyboard" for .NET and Unity
Stars: ✭ 20 (-92.73%)
Mutual labels: keyboard
react-keyboard-shortcuts
A declarative library for handling hotkeys based on explicit priority in React applications
Stars: ✭ 23 (-91.64%)
Mutual labels: keyboard
Custom Topre Guide
Guidelines for designing a custom Topre keyboard
Stars: ✭ 266 (-3.27%)
Mutual labels: keyboard
Dissatisfaction-65
A 65% QMK Bluetooth keyboard with an OLED and encoder
Stars: ✭ 61 (-77.82%)
Mutual labels: keyboard
TTInputVisibilityController
Lightweight controller to keep your inputs visible when the keyboard is presented.
Stars: ✭ 21 (-92.36%)
Mutual labels: keyboard
React Event Components
🛰 A set of React components designed to handle global events (interval, keyboard, touch, mouse, etc)
Stars: ✭ 271 (-1.45%)
Mutual labels: keyboard
Vue Touch Keyboard
Virtual keyboard component for Vue.js 2.x. Designed to Raspberry Pi Touch Display
Stars: ✭ 255 (-7.27%)
Mutual labels: keyboard
English | 简体中文
Digital Keyboard
- Develop with native javascript, doesn't rely on any frameworks and libraries.
- Support ID card, mobile number, integer, decimal, etc.
- Easy API, easy use.
- Development summary：How to release a npm package.
Type
decimal |
integer/phone |
idcard |
PropTypes
| Property | Type | Default | Description |
|---|---|---|---|
| el | DOM | parent node | |
| className | String | additonal class to control keyboard's style | |
| type | String | decimal | decimal，integer，phone，idcard |
| language | String | chinese | chinese，english |
| inputValue | Function | return keyboard value | |
| integerDigits | Number | limit integer digits | |
| decimalDigits | Number | limit decimal digits |
Getting Started
Install
yarn add digital-keyboard --dev
Usage Example
- Native JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="simbawu">
<title>Digital Keyboard</title>
<style>
.container {
color: #333;
}
</style>
</head>
<body>
<div id="values"></div>
<div id="app"></div>
<script src="./digitalKeyboard.js"></script>
</body>
</html>
//digitalKeyboard.js
import DigitalKeyboard from 'digital-keyboard';
function inputValue(value){
console.log(value); //DigitalKeyboard return value
document.querySelector('#values').innerHTML = value;
}
new DigitalKeyboard(
{
el: document.querySelector('#app'),
className: 'container',
type: 'idcard',
inputValue: inputValue,
integerDigits: 4,
decimalDigits: 2
}
);
- React
import React from 'react';
import DigitalKeyboard from 'digital-keyboard';
import s from './digitalKeyboard.scss';
class KeyboardPage extends React.Component {
constructor(){
super();
this.inputValue = this.inputValue.bind(this);
this._renderKeyboard = this._renderKeyboard.bind(this);
}
componentDidMount(){
this._renderKeyboard();
}
inputValue(value){
console.log(value); //DigitalKeyboard return value
}
_renderKeyboard(){
return new DigitalKeyboard (
{
el: this.refs.digitalKeyboard,
className: s.container,
type: 'number',
inputValue: this.inputValue,
integerDigits: 4,
decimalDigits: 2
}
);
}
render(){
return (
<div ref='digitalKeyboard'></div>
)
}
}
export default KeyboardPage;
- Vue
<template>
<div></div>
</template>
<style scoped lang="less">
.container {
color: #333;
}
</style>
<script>
import DigitalKeyboard from "digital-keyboard";
export default {
mounted () {
this._renderDigitalKeyboard();
},
methods: () {
_renderDigitalKeyboard() {
return new DigitalKeyboard (
{
el: this.$el,
className: 'container',
type: 'number',
inputValue: this.inputValue,
integerDigits: 4,
decimalDigits: 2
}
);
},
inputValue(value) {
console.log(value); //DigitalKeyboard return value
}
}
}
</script>
- Angular
// Online-demo: https://stackblitz.com/edit/angular-hkexnq
import { Component, ViewChild, OnInit, ViewEncapsulation} from '@angular/core';
import DigitalKeyboard from "digital-keyboard";
@Component({
selector: 'my-app',
template: `
<div #keyboard></div>
`,
styles: [`
.container {
color: #333;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
@ViewChild('keyboard') keyboard;
ngOnInit(){
this._renderDigitalKeyboard();
}
_renderDigitalKeyboard(){
return new DigitalKeyboard (
{
el: this.keyboard.nativeElement,
className: 'container',
type: 'number',
inputValue: this.inputValue,
integerDigits: 4,
decimalDigits: 2
}
);
}
inputValue(value) {
console.log(value); //DigitalKeyboard return value
}
}
How to Contribute
Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues,submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].