Digital Keyboard 开源项目教程

最新推荐文章于 2024-09-15 08:19:40 发布

殷巧或

最新推荐文章于 2024-09-15 08:19:40 发布

阅读量593

点赞数 18

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00061/article/details/138993554

Digital Keyboard 开源项目教程

digital-keyboard ⌨️ Digital Keyboard 数字键盘项目地址: https://gitcode.com/gh_mirrors/di/digital-keyboard

1. 项目介绍

Digital Keyboard 是一个基于原生 JavaScript 开发的数字键盘库，不依赖于任何框架和库。它支持多种输入类型，包括身份证号、手机号、整数和小数等。该项目的目标是提供一个简单易用的 API，方便开发者快速集成和使用。

主要特性：

原生 JavaScript 开发：不依赖任何框架和库。
多种输入类型支持：身份证号、手机号、整数、小数等。
简单易用的 API：方便开发者集成和使用。
MIT 许可证：开源且使用自由。

2. 项目快速启动

安装

首先，你需要使用 Yarn 来安装 digital-keyboard：

yarn add digital-keyboard --dev

使用示例

原生 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="/path/to/digitalKeyboard.js"></script>
    <script>
        import DigitalKeyboard from 'digital-keyboard';

        function inputValue(value) {
            console.log(value);
            document.querySelector('#values').innerHTML = value;
        }

        new DigitalKeyboard({
            el: document.querySelector('#app'),
            className: 'container',
            type: 'idcard',
            inputValue: inputValue,
            integerDigits: 4,
            decimalDigits: 2
        });
    </script>
</body>
</html>

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);
    }

    _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);
        }
    }
}
</script>

Angular

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);
    }
}