【jQuery】コメント機能などにCtrl+Enterでフォームを送信する機能を追加してみた
自分の運営サイトには、ユーザー同士で連絡が取りあえるように、「コメント機能」を設けています。
そのコメント機能に、「Ctrl+Enter（コントロール＋エンター）でコメントが送信できるようにしてほしい」という要望が数件来ていました。
Ctrl+Enterで送信は、TwitterなどのＷＥＢサービスでも実装されている機能ですね。
今の自分のサイトは、マウスで送信ボタンを押してもらうしかないので、キーボードだけでコメント送信が完結せず不便な状態です。
調べてみたら、Jqueryを使用することで意外と簡単に実装できたのでこちらで公開したいと思います。
（実はまだサイトには実装していませんコメントくれた方ごめんなさい…次の更新時に盛り込みます）
コメント送信機能のソースコード
ＨＴＭＬのソースコード
<!-- コメント送信フォーム --> <form method="post" action="/comment/" id="commentSubmit"> <textarea name="comment" rows="3" id="commentInput"></textarea> <input type="submit" value="コメントする"> </form>
JavaScript(Jquery)のソースコード
<!-- Jqueryの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- 処理を記入 -->
<script>
$(function(){
//テキストエリアがアクティブの状態にキーが押されたらイベントを発火
$('#commentInput').keydown(function(e){
//ctrlキーが押されてる状態か判定
if(event.ctrlKey){
//押されたキー（e.keyCode）が13（Enter）か そしてテキストエリアに何かが入力されているか判定
if(e.keyCode === 13 && $(this).val()){
//フォームを送信
$('#commentSubmit').submit();
return false;
}
}
});
});
</script>
テキストエリアが選択されている状態で、キーダウンのイベントを発火した時の処理です。
その際にコントロールキーとエンターキーが同時に押されているか＆コメントには何か入力されているかを判定しています。
そして、それらの処理がすべて通ったら送信。
簡単に実装できる上に、ユーザーインターフェースの向上に繋がるので追加したほうがいい機能だと思います。
実際にこれを実装しているサイトは「分かっているサイト」と呼ばれているとか。
自分も近いうちにこれを導入しないと…。
以上、コメント機能などにCtrl+Enterでフォームを送信する機能を追加してみた、でした。