Skip to content

Instantly share code, notes, and snippets.

@eolant

eolant/KeyboardInput.vue

Created June 6, 2018 04:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save eolant/c69c857b8acecead5bd1b04241646d24 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save eolant/c69c857b8acecead5bd1b04241646d24 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. eolant created this gist Jun 6, 2018.
    83 changes: 83 additions & 0 deletions KeyboardInput.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    <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>