Skip to content

Instantly share code, notes, and snippets.

@eolant
Created June 6, 2018 04:17
Show Gist options
  • Save eolant/c69c857b8acecead5bd1b04241646d24 to your computer and use it in GitHub Desktop.
Save eolant/c69c857b8acecead5bd1b04241646d24 to your computer and use it in GitHub Desktop.
Vue Component with Twitter Bootstrap styles for custom Mottie/Keyboard (Virtual Keyboard) input or textarea
<template>
<input
:type="type"
:placeholder="placeholder"
:name="name"
class="form-control"
autocomplete="off"
v-model="value"
>
</template>
<script>
/**
* Bootstrap ready component for custom Mottie/Keyboard input.
*
* Make sure to include jQuery and Mottie/Keyboard js and css files in your build.
* Keyboard will be attached to the bottom of the screen but feel free to style it to your needs.
* It's advisable to move keyboard settings to config file and import them into the component:
*
* ...
*
* $(this.$el).keyboard(Object.assign({
* change: (e, keyboard, el) => {
* this.change(el.value);
* }
* }, settings.keyboard));
*
* ...
*
* Works with Vee Validate and supports v-model!
*
* <keyboard-input
* type="email"
* placeholder="Email"
* name="email"
* v-model="form.email"
* v-validate="'required|email'"
* ></keyboard-input>
*
*/
export default {
props: ['type', 'placeholder', 'name'],
data: () => ({
value: null
}),
mounted() {
$(this.$el).keyboard({
usePreview: false,
change: (e, keyboard, el) => {
this.change(el.value);
}
css: {
input: 'form-control',
container: 'center-block well',
buttonDefault: 'btn btn-default',
buttonHover: 'btn-primary',
buttonAction: 'btn-secondary',
buttonDisabled: 'disabled'
},
});
},
methods: {
change(newValue) {
this.value = newValue;
this.$emit('input', this.value);
}
}
};
</script>
<style>
.ui-keyboard {
border-radius: 0;
left: 0;
top: auto;
bottom: 0;
position: fixed;
width: 100%;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment