0.0.3 • Published 3 years ago
@mobiletools/keyboard v0.0.3
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 -SAfter 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
License
Copyright (c) 2021-present, Mien