数字键盘

├── .eslintignore ├── .babelrc ├── .eslintrc ├── src ├── main.scss ├── main.js ├── Keyboard.scss └── Keyboard.js ├── .gitignore ├── .travis.yml ├── config └── webpack │ ├── webpack.prod.config.js │ ├── webpack.config.js │ ├── webpack.dev.config.js │ └── webpack.base.config.js ├── index.html ├── .editorconfig ├── LICENSE ├── package.json ├── test └── Keyboard.test.js ├── README-zh_CN.md └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | build 2 | node_modules -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "booheefe" 3 | } 4 | -------------------------------------------------------------------------------- /src/main.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | color: #bbbbbb; 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | build/app.js 4 | .coveralls.yml 5 | coverage -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "9" 4 | 5 | after_success: 6 | - yarn coveralls -------------------------------------------------------------------------------- /config/webpack/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | Keyboard: ['./src/Keyboard.js'] 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /config/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const base = require('./webpack.base.config'); 2 | const merge = require('webpack-merge'); 3 | 4 | let config; 5 | if (process.env.NODE_ENV === 'production') { 6 | config = require('./webpack.prod.config'); 7 | } else { 8 | config = require('./webpack.dev.config'); 9 | } 10 | 11 | module.exports = merge(base, config); 12 | -------------------------------------------------------------------------------- /config/webpack/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | app: ['./src/main.js'] 6 | }, 7 | plugins: [ 8 | new webpack.HotModuleReplacementPlugin() 9 | ], 10 | devServer: { 11 | inline: true, 12 | hot: true, 13 | host: '0.0.0.0', 14 | historyApiFallback: true, 15 | port: process.env.PORT || 8101 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 数字键盘 8 | 9 | 10 |

清空

11 |

12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | 5 | root = true 6 | 7 | [**] 8 | 9 | # 编码格式 10 | charset = utf-8 11 | 12 | # 文件结尾符 13 | end_of_line = lf 14 | insert_final_newline = true 15 | 16 | # 去除行尾空白字符 17 | trim_trailing_whitespace = true 18 | 19 | # space 缩进 20 | indent_style = space 21 | indent_size = 2 22 | 23 | [*.md] 24 | trim_trailing_whitespace = false 25 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import DigitalKeyboard from './Keyboard'; 2 | // import DigitalKeyboard from 'digital-keyboard'; 3 | import s from './main.scss'; 4 | 5 | function inputValue(value) { 6 | document.querySelector('#values').innerHTML = value; 7 | } 8 | 9 | document.querySelector('#clear').addEventListener('click', clearValue); 10 | 11 | function clearValue() { 12 | Keyboard.value = ''; 13 | } 14 | 15 | let Keyboard = new DigitalKeyboard({ 16 | el: document.querySelector('#app'), 17 | className: s.container, 18 | type: 'integer', 19 | inputValue: inputValue, 20 | integerDigits: 4, 21 | decimalDigits: 2, 22 | language: 'english' 23 | }); 24 | -------------------------------------------------------------------------------- /src/Keyboard.scss: -------------------------------------------------------------------------------- 1 | $fontFamily: PingFang-SC, "San Francisco", "Source Sans", Rotobo, "Helvetica Neue"; 2 | 3 | @mixin hlh($height) { 4 | height: $height; 5 | line-height: $height; 6 | } 7 | 8 | .keyboard { 9 | display: flex; 10 | flex-wrap: wrap; 11 | justify-content: space-around; 12 | font-family: $fontFamily; 13 | font-size: 12px; 14 | 15 | button { 16 | width: calc(100% /3); 17 | @include hlh(2.17em); 18 | font-family: $fontFamily; 19 | font-size: 2em; 20 | text-align: center; 21 | color: #3f3f3f; 22 | border:0; 23 | background-color: #fff; 24 | cursor: pointer; 25 | touch-action: none; 26 | -webkit-tap-highlight-color: rgba(0,0,0,0); 27 | 28 | &:focus { 29 | outline: none; 30 | } 31 | 32 | &:active { 33 | background-color: #dfdfdf; 34 | } 35 | 36 | &.keyClear { 37 | @include hlh(2.89em); 38 | font-size: 1.5em; 39 | } 40 | 41 | &.keyDelete{ 42 | font-weight: bold; 43 | } 44 | 45 | &.keyX{ 46 | @include hlh(2.55em); 47 | font-size: 1.7em; 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /config/webpack/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | output: { 6 | path: path.resolve(__dirname, '../../build'), 7 | filename: '[name].js', 8 | publicPath: '/build/', 9 | libraryTarget: 'umd', 10 | library: 'DigitalKeyboard' 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.jsx?$/, 16 | loader: 'babel-loader', 17 | exclude: /(node_modules|build|coverage)/, 18 | query: { 19 | presets: ['env'] 20 | } 21 | }, { 22 | test: /\.scss$/, 23 | use: [{ 24 | loader: 'style-loader' 25 | }, { 26 | loader: 'css-loader', 27 | options: { 28 | modules: true, 29 | localIdentName: '[name]_[local]_[hash:base64:3]' 30 | } 31 | }, { 32 | loader: 'sass-loader' 33 | }] 34 | } 35 | ] 36 | }, 37 | plugins: [ 38 | new webpack.DefinePlugin({ // 定义环境变量 39 | 'process.env': JSON.stringify(process.env.NODE_ENV) 40 | }) 41 | ] 42 | }; 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 simbawu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "digital-keyboard", 3 | "version": "1.2.2", 4 | "main": "build/Keyboard.js", 5 | "repository": "https://github.com/simbawus/digital-keyboard.git", 6 | "author": "Simbawu ", 7 | "description": "DigitalKeyboard Component", 8 | "keywords": [ 9 | "DigitalKeyboard", 10 | "Digital", 11 | "Keyboard", 12 | "key", 13 | "webpack", 14 | "simbawu" 15 | ], 16 | "license": "MIT", 17 | "devDependencies": { 18 | "babel-core": "^6.26.0", 19 | "babel-loader": "^7.1.2", 20 | "babel-polyfill": "^6.26.0", 21 | "babel-preset-env": "^1.6.1", 22 | "chai": "^4.1.2", 23 | "coveralls": "^3.0.1", 24 | "cross-env": "^5.1.5", 25 | "css-loader": "^0.28.9", 26 | "digital-keyboard": "^1.1.0", 27 | "eslint": "^4.19.1", 28 | "eslint-config-booheefe": "^1.1.0", 29 | "istanbul": "^0.4.5", 30 | "jsdom": "^11.10.0", 31 | "mocha": "^5.1.1", 32 | "node-sass": "^4.7.2", 33 | "sass-loader": "^6.0.6", 34 | "style-loader": "^0.20.1", 35 | "webpack": "^4.8.1", 36 | "webpack-cli": "^2.1.3", 37 | "webpack-dev-server": "^3.1.4", 38 | "webpack-merge": "^4.1.2" 39 | }, 40 | "scripts": { 41 | "build": "cross-env NODE_ENV=production webpack --mode production --config ./config/webpack/webpack.config.js", 42 | "start": "yarn && cross-env NODE_ENV=development webpack-dev-server --mode development --open 'Google Chrome' --config ./config/webpack/webpack.config.js", 43 | "test": "node ./node_modules/mocha/bin/mocha --compilers js:babel-core/register ./test/Keyboard.test.js", 44 | "cover": "istanbul cover ./node_modules/mocha/bin/_mocha", 45 | "coveralls": "yarn cover --report lcovonly && cat ./coverage/lcov.info | coveralls" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /test/Keyboard.test.js: -------------------------------------------------------------------------------- 1 | const expect = require('chai').expect, {JSDOM} = require('jsdom'), 2 | {window} = new JSDOM(` 3 | 4 | 5 | 6 | 7 | 8 | 数字键盘 9 | 10 | 11 |

12 |

13 | 14 | `); 15 | 16 | propagateToGlobal(window); 17 | 18 | function propagateToGlobal(window) { 19 | for (let key in window) { 20 | if (!window.hasOwnProperty(key)) continue; 21 | if (key in global) continue; 22 | global[key] = window[key]; 23 | } 24 | } 25 | 26 | const DigitalKeyboard = require('../build/Keyboard').default; 27 | 28 | describe('mocha tests', function() { 29 | 30 | let inputValue, currentValue = '', tempValue = ''; 31 | 32 | before(function() { 33 | inputValue = function(value) { 34 | document.querySelector('#values').innerHTML = value; 35 | currentValue = value; 36 | }; 37 | }); 38 | 39 | ['idcard', 'integer', 'phone', 'normal'].forEach(function(keyboardType) { 40 | it('render correct', function() { 41 | tempValue = ''; 42 | switch (keyboardType) { 43 | case 'integer': 44 | new DigitalKeyboard({el: document.querySelector('#app'), type: keyboardType, inputValue: inputValue}); 45 | expect(document.querySelectorAll('button')[9].innerHTML).be.equal('清空'); 46 | break; 47 | case 'phone': 48 | new DigitalKeyboard({el: document.querySelector('#app'), type: keyboardType, inputValue: inputValue}); 49 | expect(document.querySelectorAll('button')[9].innerHTML).be.equal('清空'); 50 | break; 51 | case 'idcard': 52 | new DigitalKeyboard({el: document.querySelector('#app'), type: keyboardType, inputValue: inputValue}); 53 | expect(document.querySelectorAll('button')[9].innerHTML).be.equal('X'); 54 | break; 55 | default: 56 | new DigitalKeyboard({el: document.querySelector('#app'), type: keyboardType, inputValue: inputValue}); 57 | expect(document.querySelectorAll('button')[9].innerHTML).be.equal('.'); 58 | break; 59 | } 60 | }); 61 | 62 | it('get correct value', function() { 63 | document.querySelectorAll('button').forEach(function(itemKey) { 64 | let event = document.createEvent('HTMLEvents'); 65 | event.initEvent('touchend', true, true); 66 | itemKey.dispatchEvent(event); 67 | let action = itemKey.getAttribute('data-action'), content = itemKey.getAttribute('data-content'); 68 | switch (action) { 69 | case 'delete': 70 | tempValue = tempValue.substr(0, tempValue.length - 1); 71 | break; 72 | case 'clear': 73 | tempValue = ''; 74 | break; 75 | default: 76 | switch (keyboardType) { 77 | case 'phone': 78 | if (tempValue.length < 11) { 79 | tempValue += content; 80 | } 81 | break; 82 | case 'idcard': 83 | if (tempValue.length < 18) { 84 | tempValue += content; 85 | } 86 | break; 87 | default: 88 | tempValue += content; 89 | } 90 | break; 91 | } 92 | 93 | expect(currentValue).to.be.equal(tempValue); 94 | }); 95 | 96 | document.querySelector('#app').innerHTML = ''; 97 | }); 98 | 99 | }); 100 | 101 | }); 102 | 103 | -------------------------------------------------------------------------------- /src/Keyboard.js: -------------------------------------------------------------------------------- 1 | import s from './Keyboard.scss'; 2 | 3 | class DigitalKeyboard { 4 | constructor(options = {}) { 5 | this.value = ''; 6 | this.options = { 7 | language: 'chinese', 8 | clearName: '清空' 9 | }; 10 | 11 | Object.assign(this.options, options); 12 | 13 | this.init(options); 14 | } 15 | 16 | handleClick(action, content) { 17 | let { options } = this; 18 | 19 | switch (action) { 20 | case 'delete': 21 | this.value = this.value.substr(0, this.value.length - 1); 22 | break; 23 | case 'clear': 24 | this.value = ''; 25 | break; 26 | default: 27 | switch (options.type) { 28 | case 'phone': 29 | if (this.value.length < 11) { 30 | this.value += content; 31 | } 32 | break; 33 | case 'idcard': 34 | if (this.value.length < 18) { 35 | this.value += content; 36 | } 37 | break; 38 | case 'integer': 39 | if (options.integerDigits && options.integerDigits <= this.value.length) { 40 | this.value = this.value; 41 | } else { 42 | this.value += content; 43 | } 44 | break; 45 | default: 46 | let _value = this.value + content; 47 | let _valueArr = _value.split('.'); 48 | let integerDigits = _valueArr[0] && _valueArr[0].length || 0; 49 | let decimalDigits = _valueArr[1] && _valueArr[1].length || 0; 50 | let integerPass = !options.integerDigits || options.integerDigits >= integerDigits; 51 | let decimalPass = !options.decimalDigits || options.decimalDigits >= decimalDigits; 52 | if (_valueArr.length === 1 && integerPass) { 53 | this.value += content; 54 | } else if (_valueArr.length === 2 && decimalPass) { 55 | this.value += content; 56 | } else { 57 | this.value = this.value; 58 | } 59 | 60 | } 61 | break; 62 | } 63 | 64 | options.inputValue(this.value); 65 | } 66 | 67 | handleClearName() { 68 | const { language } = this.options; 69 | let clearName = '清空'; 70 | switch (language) { 71 | case 'chinese': 72 | clearName = '清空'; 73 | break; 74 | case 'english': 75 | clearName = 'Clear'; 76 | break; 77 | default: 78 | clearName = '清空'; 79 | } 80 | this.options.clearName = clearName; 81 | } 82 | 83 | initKeys(type) { 84 | const { clearName } = this.options; 85 | let typeKey = {}; 86 | switch (typeKey) { 87 | 88 | } 89 | switch (type) { 90 | case 'integer': 91 | typeKey = { 92 | content: clearName, 93 | action: 'clear' 94 | }; 95 | break; 96 | case 'phone': 97 | typeKey = { 98 | content: clearName, 99 | action: 'clear' 100 | }; 101 | break; 102 | case 'idcard': 103 | typeKey = { 104 | content: 'X', 105 | action: 'value' 106 | }; 107 | break; 108 | default: 109 | typeKey = { 110 | content: '.', 111 | action: 'value' 112 | }; 113 | break; 114 | } 115 | 116 | this.items = [ 117 | { 118 | 'content': '1', 119 | 'action': 'value' 120 | }, { 121 | 'content': '2', 122 | 'action': 'value' 123 | }, { 124 | 'content': '3', 125 | 'action': 'value' 126 | }, { 127 | 'content': '4', 128 | 'action': 'value' 129 | }, { 130 | 'content': '5', 131 | 'action': 'value' 132 | }, { 133 | 'content': '6', 134 | 'action': 'value' 135 | }, { 136 | 'content': '7', 137 | 'action': 'value' 138 | }, { 139 | 'content': '8', 140 | 'action': 'value' 141 | }, { 142 | 'content': '9', 143 | 'action': 'value' 144 | }, typeKey, { 145 | 'content': '0', 146 | 'action': 'value' 147 | }, { 148 | 'content': '←', 149 | 'action': 'delete' 150 | } 151 | ]; 152 | } 153 | 154 | _renderKeyboard(container) { 155 | const { clearName } = this.options; 156 | let className = ''; 157 | let keyboards = this.items.map((item) => { 158 | switch (item.content) { 159 | case 'X': 160 | className = s.keyX; 161 | break; 162 | case clearName: 163 | className = s.keyClear; 164 | break; 165 | case '←': 166 | className = s.keyDelete; 167 | break; 168 | default: 169 | className = ''; 170 | break; 171 | } 172 | 173 | return ``; 174 | }); 175 | 176 | const keyboardBox = document.createElement('div'); 177 | keyboardBox.className = `${s.keyboard} ${this.options.className}`; 178 | keyboardBox.innerHTML = keyboards.join(''); 179 | keyboardBox.addEventListener('touchend', (e) => { 180 | let {action, content} = e.target.dataset; 181 | this.handleClick(action, content); 182 | }); 183 | 184 | container.appendChild(keyboardBox); 185 | } 186 | 187 | init(options) { 188 | this.handleClearName(); 189 | this.initKeys(options.type); 190 | this._renderKeyboard(options.el); 191 | } 192 | } 193 | 194 | export default DigitalKeyboard; 195 | -------------------------------------------------------------------------------- /README-zh_CN.md: -------------------------------------------------------------------------------- 1 | [English](README.md) | 简体中文 2 | 3 | # DigitalKeyboard 数字键盘 4 | 5 | [![Build Status](https://travis-ci.org/simbawus/digital-keyboard.svg?branch=master)](https://travis-ci.org/simbawus/digital-keyboard) 6 | [![Coverage Status](https://coveralls.io/repos/github/simbawus/digital-keyboard/badge.svg?branch=master)](https://coveralls.io/github/simbawus/digital-keyboard?branch=master) 7 | [![npm](https://img.shields.io/npm/v/digital-keyboard.svg)](https://www.npmjs.com/package/digital-keyboard) 8 | [![npm](https://img.shields.io/npm/dt/digital-keyboard.svg)](https://www.npmjs.com/package/digital-keyboard) 9 | [![GitHub license](https://img.shields.io/github/license/simbawus/digital-keyboard.svg)](https://github.com/simbawus/digital-keyboard/blob/master/LICENSE) 10 | 11 | - 原生js开发、不依赖任何框架和库的轻量级移动端数字键盘 12 | - 支持身份证、手机号、整数、小数多类型输入 13 | - API简洁，非常好上手 14 | - 开发总结：[从0开始发布一个无依赖、高质量的npm](https://github.com/simbawus/blog/issues/12) 15 | 16 | [![Example](https://i.loli.net/2018/05/16/5afc5086957b3.gif)](https://i.loli.net/2018/05/16/5afc5086957b3.gif) 17 | 18 | ## 键盘类型 19 | 20 | 21 | 22 | 23 | 27 | 31 | 35 | 36 | 37 |

24 |

25 |

小数

26 |

28 |

29 |

整数/手机号

30 |

32 |

33 |

身份证

34 |

38 | 39 | ## 属性 40 | 41 | | Property | Type | Default | Description | 42 | | :------------ | :------- | :------ | :--------------------------------------- | 43 | | el | DOM | | 键盘父节点 | 44 | | className | String | | 外部传入可控制键盘样式的class | 45 | | type | String | decimal | 键盘类型：decimal小数，integer整数，phone手机号，idcard身份证 | 46 | | language | String | chinese | 语言：chinese，english | 47 | | inputValue | Function | | 键盘输入返回值 | 48 | | integerDigits | Number | | 限制整数位数 | 49 | | decimalDigits | Number | | 限制小数位数 | 50 | 51 | ## 开始上手 52 | 53 | ### 安装 54 | 55 | ```shell 56 | yarn add digital-keyboard --dev 57 | ``` 58 | 59 | ### 使用示例 60 | 61 | - **原生 JavaScript** 62 | 63 | ```html 64 | 65 | 66 | 67 | 68 | 69 | 数字键盘 70 | 75 | 76 | 77 |

78 |

79 | 80 | 81 | 82 | ``` 83 | 84 | ```javascript 85 | //digitalKeyboard.js 86 | import DigitalKeyboard from 'digital-keyboard'; 87 | 88 | function inputValue(value){ 89 | console.log(value); //DigitalKeyboard return value 90 | document.querySelector('#values').innerHTML = value; 91 | } 92 | 93 | new DigitalKeyboard( 94 | { 95 | el: document.querySelector('#app'), 96 | type: 'idcard', 97 | className: 'container', 98 | inputValue: inputValue, 99 | integerDigits: 4, 100 | decimalDigits: 2 101 | } 102 | ); 103 | ``` 104 | 105 | - **React** 106 | 107 | ```jsx 108 | import React from 'react'; 109 | import DigitalKeyboard from "digital-keyboard"; 110 | import s from './digitalKeyboard.scss; 111 | 112 | class KeyboardPage extends React.Component { 113 | 114 | constructor(){ 115 | super(); 116 | 117 | this.inputValue = this.inputValue.bind(this); 118 | this._renderKeyboard = this._renderKeyboard.bind(this); 119 | } 120 | 121 | componentDidMount(){ 122 | this._renderKeyboard(); 123 | } 124 | 125 | inputValue(value){ 126 | console.log(value); //DigitalKeyboard return value 127 | } 128 | 129 | _renderKeyboard(){ 130 | return new DigitalKeyboard ( 131 | { 132 | el: this.refs.digitalKeyboard, 133 | className: s.container, 134 | type: 'number', 135 | inputValue: this.inputValue, 136 | integerDigits: 4, 137 | decimalDigits: 2 138 | } 139 | ); 140 | } 141 | 142 | render(){ 143 | return ( 144 |

145 | ) 146 | } 147 | } 148 | 149 | export default KeyboardPage; 150 | ``` 151 | 152 | - **Vue** 153 | 154 | ```js 155 | 158 | 163 | 189 | ``` 190 | - **Angular** 191 | 192 | ```typescript 193 | // Online-demo: https://stackblitz.com/edit/angular-hkexnq 194 | import { Component, ViewChild, OnInit, ViewEncapsulation} from '@angular/core'; 195 | import DigitalKeyboard from "digital-keyboard"; 196 | 197 | @Component({ 198 | selector: 'my-app', 199 | template: ` 200 |

201 | `, 202 | styles: [` 203 | .container { 204 | color: #333; 205 | } 206 | `], 207 | encapsulation: ViewEncapsulation.None 208 | }) 209 | export class AppComponent implements OnInit{ 210 | 211 | @ViewChild('keyboard') keyboard; 212 | 213 | ngOnInit(){ 214 | this._renderDigitalKeyboard(); 215 | } 216 | 217 | _renderDigitalKeyboard(){ 218 | return new DigitalKeyboard ( 219 | { 220 | el: this.keyboard.nativeElement, 221 | className: 'container', 222 | type: 'number', 223 | inputValue: this.inputValue, 224 | integerDigits: 4, 225 | decimalDigits: 2 226 | } 227 | ); 228 | } 229 | 230 | inputValue(value) { 231 | console.log(value); //DigitalKeyboard return value 232 | } 233 | } 234 | ``` 235 | 236 | ## 如何贡献 237 | 238 | 欢迎每个人为这个项目做出贡献。可以从查看我们[未解决的问题](https://github.com/simbawus/DigitalKeyboard/issues)、[提交新问题](https://github.com/simbawus/DigitalKeyboard/issues/new?labels=bug)或[提出新功能](https://github.com/simbawus/DigitalKeyboard/issues/new?labels=enhancement)入手，参与讨论投票您喜欢或不喜欢的问题。 239 | 240 | ## 开源证书 241 | 242 | [**The MIT License**](LICENSE). 243 | 244 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | English | [简体中文](README-zh_CN.md) 2 | 3 | # Digital Keyboard 4 | 5 | [![Build Status](https://travis-ci.org/simbawus/digital-keyboard.svg?branch=master)](https://travis-ci.org/simbawus/digital-keyboard) 6 | [![Coverage Status](https://coveralls.io/repos/github/simbawus/digital-keyboard/badge.svg?branch=master)](https://coveralls.io/github/simbawus/digital-keyboard?branch=master) 7 | [![npm](https://img.shields.io/npm/v/digital-keyboard.svg)](https://www.npmjs.com/package/digital-keyboard) 8 | [![npm](https://img.shields.io/npm/dt/digital-keyboard.svg)](https://www.npmjs.com/package/digital-keyboard) 9 | [![GitHub license](https://img.shields.io/github/license/simbawus/digital-keyboard.svg)](https://github.com/simbawus/digital-keyboard/blob/master/LICENSE) 10 | 11 | - Develop with native javascript, doesn't rely on any frameworks and libraries. 12 | - Support ID card, mobile number, integer, decimal, etc. 13 | - Easy API, easy use. 14 | - Development summary：[How to release a npm package](https://github.com/simbawus/blog/issues/12). 15 | 16 | [![Example](https://i.loli.net/2018/05/16/5afc5086957b3.gif)](https://i.loli.net/2018/05/16/5afc5086957b3.gif) 17 | 18 | ## Type 19 | 20 | 21 | 22 | 23 | 27 | 31 | 35 | 36 | 37 |

24 |

25 |

decimal

26 |

28 |

29 |

integer/phone

30 |

32 |

33 |

idcard

34 |

38 | 39 | ## PropTypes 40 | 41 | | Property | Type | Default | Description | 42 | | :------------ | :------- | :------ | :--------------------------------------- | 43 | | el | DOM | | parent node | 44 | | className | String | | additonal class to control keyboard's style | 45 | | type | String | decimal | decimal，integer，phone，idcard | 46 | | language | String | chinese | chinese，english | 47 | | inputValue | Function | | return keyboard value | 48 | | integerDigits | Number | | limit integer digits | 49 | | decimalDigits | Number | | limit decimal digits | 50 | 51 | ## Getting Started 52 | 53 | ### Install 54 | 55 | ```shell 56 | yarn add digital-keyboard --dev 57 | ``` 58 | 59 | ### Usage Example 60 | 61 | - **Native JavaScript** 62 | 63 | ```html 64 | 65 | 66 | 67 | 68 | 69 | Digital Keyboard 70 | 75 | 76 | 77 |

78 |

79 | 80 | 81 | 82 | ``` 83 | 84 | ```javascript 85 | //digitalKeyboard.js 86 | import DigitalKeyboard from 'digital-keyboard'; 87 | 88 | function inputValue(value){ 89 | console.log(value); //DigitalKeyboard return value 90 | document.querySelector('#values').innerHTML = value; 91 | } 92 | 93 | new DigitalKeyboard( 94 | { 95 | el: document.querySelector('#app'), 96 | className: 'container', 97 | type: 'idcard', 98 | inputValue: inputValue, 99 | integerDigits: 4, 100 | decimalDigits: 2 101 | } 102 | ); 103 | ``` 104 | 105 | - **React** 106 | 107 | ```jsx 108 | import React from 'react'; 109 | import DigitalKeyboard from 'digital-keyboard'; 110 | import s from './digitalKeyboard.scss'; 111 | 112 | class KeyboardPage extends React.Component { 113 | 114 | constructor(){ 115 | super(); 116 | 117 | this.inputValue = this.inputValue.bind(this); 118 | this._renderKeyboard = this._renderKeyboard.bind(this); 119 | } 120 | 121 | componentDidMount(){ 122 | this._renderKeyboard(); 123 | } 124 | 125 | inputValue(value){ 126 | console.log(value); //DigitalKeyboard return value 127 | } 128 | 129 | _renderKeyboard(){ 130 | return new DigitalKeyboard ( 131 | { 132 | el: this.refs.digitalKeyboard, 133 | className: s.container, 134 | type: 'number', 135 | inputValue: this.inputValue, 136 | integerDigits: 4, 137 | decimalDigits: 2 138 | } 139 | ); 140 | } 141 | 142 | render(){ 143 | return ( 144 |

145 | ) 146 | } 147 | } 148 | 149 | export default KeyboardPage; 150 | ``` 151 | 152 | - **Vue** 153 | 154 | ```js 155 | 158 | 163 | 189 | ``` 190 | * **Angular** 191 | 192 | ```typescript 193 | // Online-demo: https://stackblitz.com/edit/angular-hkexnq 194 | import { Component, ViewChild, OnInit, ViewEncapsulation} from '@angular/core'; 195 | import DigitalKeyboard from "digital-keyboard"; 196 | 197 | @Component({ 198 | selector: 'my-app', 199 | template: ` 200 |