Hotkey

Vue Bootstrap 5 Hotkey

The mdbHotkey is a custom directive which allows to set callbacks for key combinations.

Note: Read the API tab to find all available options and advanced customization

Basic example

Import the directive from 'mdb-vue-ui-kit' and add mdbHotkey to the directives object. Attach the directive to the element on which you wish to listen for events and pass a keymap as the value.

Press alt+l to insert a default text / ctrl + c to clear textarea 

        
            
            <template>
              <div class="form-outline">
                <textarea
                  class="form-control"
                  v-model="value"
                  v-mdb-hotkey="inputKeymap"
                  id="input1"
                  rows="2"
                ></textarea>
                <label class="form-label" for="input1">Press a key combination</label>
              </div>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { mdbHotkey } from "mdb-vue-ui-kit";
              
              export default {
                directives: {
                  mdbHotkey
                },
                setup() {
                  const value = ref('');
                  const insertText = () => {
                    value.value =
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
                  };
                  const removeText = () => {
                    value.value = "";
                  };
                  const inputKeymap = computed(() => {
                    return {
                      "alt+l": insertText,
                      "ctrl+c": removeText,
                    };
                  });

                  return { value, inputKeymap }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { mdbHotkey as vMdbHotkey } from "mdb-vue-ui-kit";

              const value = ref('');
              const insertText = () => {
                value.value =
                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
              };
              const removeText = () => {
                value.value = "";
              };
              const inputKeymap = computed<object>(() => {
                return {
                  "alt+l": insertText,
                  "ctrl+c": removeText,
                };
              });
            </script>

Hotkey - API

Import

        
            
          <script>
            import {
              mdbHotkey
            } from 'mdb-vue-ui-kit';
          </script>

Modifiers

Name Description Example
:window Adds the event listener to the window instead of the element. <div v-mdb-hotkey:window="keymap"></div>
:document Adds the event listener to the document instead of the element. <div v-mdb-hotkey:document="keymap"></div>

Options

Name Description Example
.stop Calls stopPropagation method on the keydown event <div v-mdb-hotkey.stop="keymap"></div>
.prevent Calls preventDefault method on the keydown event <div v-mdb-hotkey.prevent="keymap"></div>