kabootstrapにてCtrl + Enter でSubmitボタンを押すようにしたい。

やりたいこと

Ctrl + Enter でSubmitボタンを押すようにしたい。

現状

console.logのsubmit!!!!はログに出力されるが、実際にpostが実行されない。

環境

Flask
bootstrap
wtfforms

コード

form.html

python
1{% extends "layout.html" %}
2{% block content %}
3  <!--{% import "bootstrap/wtf.html" as wtf %}-->
4  <script>
5    $(function(){
6      //テキストエリアがアクティブの状態にキーが押されたらイベントを発火
7      $('#post').keydown(function(e){
8        //ctrlキーが押されてる状態か判定
9        if(event.ctrlKey){
10          //押されたキー（e.keyCode）が13（Enter）か　そしてテキストエリアに何かが入力されているか判定
11          if(e.keyCode === 13 && $(this).val()){
12            console.log("submit!!!!");
13            //フォームを送信
14            $('#submit').submit();
15            return false;
16              }
17          }
18        });
19    });
20    </script>
21
22  <form class="form form-horizontal" method="post" role="form">
23    {{ form.csrf_token() }}
24    {{ wtf.form_field(form.post, class="form-control", placeholder="What are you up to?")}}
25    {{ wtf.form_field(form.submit, class="btn btn-primary")}}
26  </form>
27  
28
29  <form>
30    <div class="form-group">
31      <label for="exampleFormControlTextarea1">Example textarea</label>
32      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
33    </div>
34    <button type="submit" class="btn btn-primary">Submit</button>
35  </form>
36
37  <hr>
38
39  {% for note in notes%}
40  <div class="container shadow-sm mb-2">
41    <div class="row">
42      <div class="d-flex align-items-center">
43        <img src="/images/{{ note.user.drive_file.name }}" class="img-thumbnail" width="100px"" height="100px"> 
44      </div>
45      <div class="col">
46        <div class="row">
47          <div class="col-md-6">{{ note.user.name }} @{{ note.user.name }}</div>
48          <div class="col-md-6 text-right">{{ note.createdAt }}</div>
49        </div>
50        <div class="col">
51          {{ note.text }}
52        </div>
53      </div>
54    </div>
55  </div>
56  {% endfor %}
57
58{% endblock %}

layout.html

python
1<html>
2  <head>
3    <!-- Bootstrap4:START-->
4    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
5    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
7    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
8    <!-- Bootstrap4:END -->
9  </head>
10  <body>
11    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
12      <a class="navbar-brand" href="/">Alonetter</a>
13      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
14        <span class="navbar-toggler-icon"></span>
15      </button>
16
17      <div class="collapse navbar-collapse" id="navbarSupportedContent">
18        <ul class="navbar-nav mr-auto">
19          <li class="nav-item active">
20            <a class="nav-link" href="/profile">Profile <span class="sr-only">(current)</span></a>
21          </li>
22        {% if current_user.is_authenticated %}
23          <li class="nav-item active">
24            <a class="nav-link" href="/logout">Logout <span class="sr-only">(current)</span></a>
25          </li>
26          <li class="nav-item active">
27            <span class="navbar-text">Hi {{ current_user.username  }}!</span>
28          </li>
29        {% else %}
30          <li class="nav-item active">
31            <a class="nav-link" href="/login">Login <span class="sr-only">(current)</span></a>
32          </li>
33        {% endif %}
34        </ul>
35      </div>
36    </nav>
37
38    {% for category, message in get_flashed_messages(with_categories=true) %}
39    <div class="alert {{ category }} alert-warning alert-dismissible fade show" role="alert">
40      {{ message }}
41      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
42        <span aria-hidden="true">&times;</span>
43      </button>
44    </div>
45    {% endfor %}
46
47    {% block content %}{% endblock %}
48   </body>
49</html>

form.py

python
1...
2class PostForm(FlaskForm):
3    post  = TextAreaField('Post')
4    submit = SubmitField('Submit')
5...

生成されたhtml

なにかご教授いただければ幸いです。

回答用1

行動規範の内容に同意します

回答3件

$(function(){
  //テキストエリアがアクティブの状態にキーが押されたらイベントを発火
  $('#post').keydown(function(e){
    //ctrlキーが押されてる状態か判定
    if(event.ctrlKey){
      //押されたキー（e.keyCode）が13（Enter）か　そしてテキストエリアに何かが入力されているか判定
      if(e.keyCode === 13 && $(this).val()){
        console.log("submit!!!!");
        //フォームを送信
        $('#submit').trigger("click");
        return false;
          }
      }
    });
});

こちらの方法にて上手く実装できました。

投稿2020/09/05 23:28

na2kaze

総合スコア10

自己解決

html
1<script>
2    $(function(){
3      //テキストエリアがアクティブの状態にキーが押されたらイベントを発火
4      $('#post').keydown(function(e){
5        //ctrlキーが押されてる状態か判定
6        if(event.ctrlKey){
7          //押されたキー（e.keyCode）が13（Enter）か　そしてテキストエリアに何かが入力されているか判定
8          if(e.keyCode === 13 && $(this).val()){
9            console.log("submit!!!!");
10            //フォームを送信
11            $('#submit').trigger("click");
12            return false;
13              }
14          }
15        });
16    });
17    </script>

ボタンを押したことにするという処理でなんとか出来ました。

投稿2020/09/05 16:04

na2kaze

総合スコア10

html
1<form name="myform">

Javascript
1document.myform.submit()

投稿2020/09/05 12:19

yuki84web

総合スコア1857

na2kaze

2020/09/05 12:39

from に <form class="form form-horizontal" method="post" role="form" name="notepost"> に変更し、 document.notepost.submit() としたのですが、回答用1の画像のようなエラーが出てしまいました。

行動規範の内容に同意します

あなたの回答