CoffeeScriptのイベント発火条件をボタンクリックに変更したい。またショートカットキーを設定したい。

Question

前提・実現したいこと

チャット機能を作成しています。
現在機能自体は完成しており、文字入力後Enterを押すことで送信されます。

この送信条件をEnterを押した時ではなく、ボタンクリックしたときに変更したいです。
また、送信のショートカットキーをShift+Enterに設定したいです。

恥ずかしながらjsについては勉強不足であり、
ググってもピンとくるものが見つかりませんでしたので質問させていただきます。

実現のための考え方や、検索ワードだけでもいいので教えていただけると幸いです。

該当のソースコード

<input class="center-block" type="text" data-behavior="room_speaker">

$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
      if event.keyCode is 13
        App.room.speak event.target.value
        event.target.value = ''
        event.preventDefault()

補足情報（FW/ツールのバージョンなど）

Rails 5.2.0

追記

「js ボタン 発火」などで調べました。

$('button').click();

のようなものは見つかるのですが、自分のコードに当てはめてみてもうまく動かないといった状況です。
このチャット機能はActionCableを利用したリアルタイムで双方向通信を行うものなのですが、ボタンを押したときにうまくレンダリングされないです。
さらにボタンを押すと勝手にリロードされたり...。
↓が書き換えてやってみたものです。

<input class="center-block" type="text" data-behavior="room_speaker">
<button>送信</button>

#$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
$('button').click, '[data-behavior~=room_speaker]', (event) ->
      #if event.keyCode is 13
      App.room.speak event.target.value
      event.target.value = ''
      event.preventDefault()

Comments

[m.ts10806]

どのような検索の仕方をされたのでしょうか？検索ワード、参考にした記事なども質問に追記してください。　>ググってもピンとくるものが見つかりませんでした

[m.ts10806]

その「送信するためのボタン」は既に設置済みということでよろしいでしょうか？

Answer 1

buttonのデフォルトはsubmitなので、フォーム送信されてしまいます。

• <BUTTON>

初期値はtype="submit"で、送信ボタンを作成します。

typeをかえることで、送信しないボタンがひとまずできます。
submitのままevent.preventDefault()でも良いですが明示的に送信しないボタンを設置した方が良いです。

<button type="button">送信</button>

Comments

[退会済みユーザー]

押しても何も起きないボタンができました。
あとはこれを押すと正常にメッセージが送信される用に頑張ってみます！
ありがとうございます！

Answer 2

実装できました。

<textarea class="center-block" type="text" data-behavior="room_speaker" style="margin-bottom: 20px; width: 100%; max-width: 500px;"></textarea>
<button class='chat_submit' type="button">送信</button>

    $(document).on 'keydown', '[data-behavior~=room_speaker]', (event) ->
      if event.ctrlKey
        if event.keyCode is 13
          App.room.speak event.target.value
          event.target.value = ''
          event.preventDefault()

    $(document).on 'click', '.chat_submit', ->
      App.room.speak $('[data-behavior~=room_speaker]').val()
      $('[data-behavior~=room_speaker]').val('')
      event.preventDefault()