Как отправить форму по нажатию enter или ctr+enter?

Question

        <form @submit.prevent="addNewUser" id="myform">
            <div class="form-group row">
                <label class="col-sm-3 col-form-label required">Фамилия</label>
                <div class="col-sm-9">
                    <input v-model.trim="new_child_surname" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="submit" class="btn btn-success">Добавить</button>
            </div>
        </form>

Как отправить форму по нажатию enter или ctr+enter ?

Answer 1

Вам необходимо завязаться на событие keydown и добавить модификаторы ctrl.enter

<template>
  <form @submit.prevent="addNewUser" id="myform" ref="form">
    <label>Фамилия</label>
    <input v-model.trim="new_child_surname" v-on:keydown.ctrl.enter="submitForm">
    <button type="submit">Добавить</button>
  </form>
</template>

<script>
export default {
  name: "PersonForm",
  data() {
    return { new_child_surname: "test" };
  },
  methods: {
    addNewUser() {
      // некоторая кастомная логика
    },
    submitForm() {
      // Отправка формы по ctrl+enter
      this.$refs.form.submit();
    }
  }
};
</script>

Когда пользователь нажмет эту комбинацию в инпуте, сработает обработчик события и вы получите возможность реализовать свою кастомную логику. Хотя нужно заметить что отправка по enter работает в html по умолчанию, а Ctrl+Enter наоборот используется, чтоб избежать отправки сообщения по Enter

Ссылка на sandbox с примером https://codesandbox.io/s/damp-shape-ggeef?file=/src/components/person-form.vue

БЛОГ НА HUSL

Как отправить форму по нажатию enter или ctr+enter?

Ответы (1 шт):