プロローグ
element UIの[メッセージボックス] (https://element.eleme.io/#/en-US/component/message-box#messagebox)で[Prompt](https://element.eleme.io/#/en-US/component/message-box#prompt)を使用してメッセージを入力できるようにしたのですが、 Enterキーを押すとフォームが勝手に送信されてしまうので、そちらを解消する方法を記載したいと思います。
※いろいろ試した結果、メッセージボックスと$promptは使用せず、ダイアログとinputを使用してできるようになりました。
不備不足だったり、理解が浅くて説明不足なところがあるかと思いますが、
勉強して更新していきたいとは思っています。
方法
$promptメソッドを使うことでメッセージボックスに入力フォームを作ることができます（下記コード、elementUI Promptより）。
<script>
export default {
methods: {
open() {
this.$prompt('Please input your e-mail', 'Tip', {
//ここに$promptを書くことで入力フォームが作られる
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: 'Invalid Email'
}).then(({ value }) => {
this.$message({
type: 'success',
message: 'Your email is:' + value
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Input canceled'
});
});
}
}
}
</script>
しかし、エンターキーをクリックすることで送信されてしまうので、ボタンをクリックしたときだけ送信できるようにしたいこともあるかと思います（殆どがそうかも知れない）。
下記コードはもともとメッセージボックスと$promptで書いていた入力フォームです。
<script>
methods: {
nameForm() {
this.$prompt('名前を入力してください', '名前入力フォーム', {
confirmButtonText: '送信する',
cancelButtonText: 'キャンセル',
inputErrorMessage: '記入しないと送信できません',
inputPlaceholder: '漢字で記入してください',
})};
}
</script>
それを下記のように変更しました。
<template lang="pug">
el-dialog(title="名前入力フォーム" :visible.sync="dialogFlg" :before-close="closeDialog")
.input-form
label 名前を入力してください
el-input.form(v-model="form.name" :placeholder="漢字で記入してください")
span.dialog-footer(slot="footer")
el-button(@click="closeDialog") キャンセル
el-button(@click="push") 送信する
</template>
<script>
export default {
data () {
return {
form: {
name: null
},
dialogFlg: false,
closeDialogFlg: false
}
},
</script>
dialogFlg: falseあたりの説明は省略しますが、入力フォームのダイアログを表示させたいところでdialogFlg: trueとなるようにすればダイアログが表示されます。
v-model="form.name"で入力されたデータを保存する場所を作ります。
closeDialogメソッドでダイアログを閉じるメソッドを作成します（下記のように）。
closeDialog: function()
{
this.closeDialogFlg = false
},
pushメソッドで送信をクリックした時のメソッドを作成します（下記のように）。
APIを使用する場合は、ここに書きます。
push()
{
this.loading = true;
API.testApi(this.name).then(() => {
XXXX
//APIでしたいこと書いたりしてください
}).finally(() => {
this.loading = false;
this.dialogFlg = false
// ダイアログを閉じるのを忘れずに
});
}
終わりに
メッセージボックスと$promptを使用するとパソコン上でエンターキーで送信できてしまうバグを見つけて（携帯ではエンターキーとかないのでそのようなバグはないと思います）、それをダイアログとinputの形に修正するのはめんどうな作業でしたが、なんだか理解深まったきがします。
それに考えながら修正して、うまく動いたのでめんどうな作業でしたが、楽しかったです。
色々調べると、エンターキーで送信させない方法はたくさんあるので色々試してみて合うやつをやるといいと思います。
エンターキーで送信させない方法の色々
・Enterキーを無効にする方法
・[JavaScript] Enterキーで直接Submitする方法と無効化する方法
・[jQuery] Enterキーでフォーカスを移動するには
・Enterキーでフォームが送信されないようにする
・[Bug Report] Prevent submit when press enter using input form. bug with input