@mobiletools/keyboard

M Keyboard

What is M-Keyboard

M-Keyboard is a tool for WEB mobile application, will provide a customize keyboard.

Build in Web Component, No dependency!

【查看中文文档】

Features

• support digital, number, ID Card mode.

• support theme change

Preview

Theme Preview

Type Preview

type = number

type = idcard

type = digital

Installation

Method1 tag import：

<script src="/path/to/keyboard.min.js" type="text/javascript"></script>

Method2 npm install：

npm i @mobiletools/keyboard -S

After install from NPM but you still need import keyboard.js file to your project.

Getting Started

Demo

<m-keyboard id="test" type="idcard" theme="light" value="2021"></m-keyboard>

<script>
  document.querySelector("#test").addEventListener("oninput", (e) => {
    console.log(e);
  });
</script>

How does it works

After you add keyboard to the dom, it will listen on the click event, once user click the m-keyboard or the inner input, it will trigger the show function to show the keyboard.

And this logic is handled inside the component, user don't need pay attention.

Settings

Name	Default	value	Type	Description
theme	dark	dark, light	String	selected theme for current keyboard
type	number	number, digital, idcard	String	keyboard type
value	''		String	default value for the input

Values

Theme:

• light
• dark

type:

• number
• digital
• idcard

Functions

• destory(): when user going to remove the m-keyboard can call the destory function to remove the style and keyboard doms

Events

Name	Description
oninput	dispatch this event when user input value, will emit the latest input value and old value
onchange	dispatch this event when user press done button, will emit the latest input value
onhide	dispatch this event when user fold the keyboard

You May need

Sroll Picker: A wheel like picker for web applications

Scroll Picker

License

MIT LICENSE

Copyright (c) 2021-present, Mien