https://github.com/wusb/digital-keyboard
⌨️ Digital Keyboard 数字键盘
https://github.com/wusb/digital-keyboard
digital digital-keyboard digitalkeyboard keyboard mobile-keyboards
Last synced: about 1 year ago
JSON representation
⌨️ Digital Keyboard 数字键盘
- Host: GitHub
- URL: https://github.com/wusb/digital-keyboard
- Owner: wusb
- License: mit
- Created: 2018-05-10T02:16:08.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-13T09:01:41.000Z (over 7 years ago)
- Last Synced: 2025-04-10T15:58:14.159Z (about 1 year ago)
- Topics: digital, digital-keyboard, digitalkeyboard, keyboard, mobile-keyboards
- Language: JavaScript
- Homepage:
- Size: 170 KB
- Stars: 277
- Watchers: 12
- Forks: 46
- Open Issues: 2
-
Metadata Files:
- Readme: README-zh_CN.md
- License: LICENSE
Awesome Lists containing this project
README
[English](README.md) | 简体中文
# DigitalKeyboard 数字键盘
[](https://travis-ci.org/simbawus/digital-keyboard)
[](https://coveralls.io/github/simbawus/digital-keyboard?branch=master)
[](https://www.npmjs.com/package/digital-keyboard)
[](https://www.npmjs.com/package/digital-keyboard)
[](https://github.com/simbawus/digital-keyboard/blob/master/LICENSE)
- 原生js开发、不依赖任何框架和库的轻量级移动端数字键盘
- 支持身份证、手机号、整数、小数多类型输入
- API简洁，非常好上手
- 开发总结：[从0开始发布一个无依赖、高质量的npm](https://github.com/simbawus/blog/issues/12)
[](https://i.loli.net/2018/05/16/5afc5086957b3.gif)
## 键盘类型
小数
整数/手机号
身份证
## 属性
| Property | Type | Default | Description |
| :------------ | :------- | :------ | :--------------------------------------- |
| el | DOM | | 键盘父节点 |
| className | String | | 外部传入可控制键盘样式的class |
| type | String | decimal | 键盘类型：decimal小数，integer整数，phone手机号，idcard身份证 |
| language | String | chinese | 语言：chinese，english |
| inputValue | Function | | 键盘输入返回值 |
| integerDigits | Number | | 限制整数位数 |
| decimalDigits | Number | | 限制小数位数 |
## 开始上手
### 安装
```shell
yarn add digital-keyboard --dev
```
### 使用示例
- **原生 JavaScript**
```html
数字键盘
.container {
color: #333;
}
```
```javascript
//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'),
type: 'idcard',
className: 'container',
inputValue: inputValue,
integerDigits: 4,
decimalDigits: 2
}
);
```
- **React**
```jsx
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 (
)
}
}
export default KeyboardPage;
```
- **Vue**
```js
.container {
color: #333;
}
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
}
}
}
```
- **Angular**
```typescript
// 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: `
`,
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
}
}
```
## 如何贡献
欢迎每个人为这个项目做出贡献。可以从查看我们[未解决的问题](https://github.com/simbawus/DigitalKeyboard/issues)、[提交新问题](https://github.com/simbawus/DigitalKeyboard/issues/new?labels=bug)或[提出新功能](https://github.com/simbawus/DigitalKeyboard/issues/new?labels=enhancement)入手，参与讨论投票您喜欢或不喜欢的问题。
## 开源证书
[**The MIT License**](LICENSE).