研究

【Firebase】JavaScriptにてCommand+リターンキー=submitを実装する

投稿者:

実装してみましょう

最近TwitterやSlackで見かける、Commandキー+リターンキーでsubmitするのを実装します。

        <form id='chat_form'>
          <textarea class="box" id='chat_message' placeholder='メッセージ...' required></textarea>
          <button class="btn btn--blue box" type='submit'>ポスト</button>
        </form>
document.querySelector("#chat_message").addEventListener("keydown", function(event) {
  if (((event.ctrlKey && !event.metaKey) || (!event.ctrlKey && event.metaKey)) && event.keyCode == 13) {
    submitPost();
  }
});

document.querySelector("#chat_form").addEventListener("submit", function(event) {
  submitPost();
  event.preventDefault();
});

// submitされて以降の機能
function submitPost(){
  // 略

event.ctrlKey はWindowsのCtrlキー、
event.metaKey が MacのCommandキーの判別になります。
これらが押下されていて＋keyCode==13つまりリターンキーが押下されたら、
該当のフォームのsubmitを発火します。

ってkeyCodeって非推奨っぽいけど、まあいいやw