前提・実現したいこと
コメント投稿の機能において、jQueryを使用し、textareaにフォーカスしているときは送信ボタンを表示し、フォーカスしていないときは送信ボタンを非表示にする機能を実装したいと思っています。
発生している問題・エラーメッセージ
下記のようなコードで実装したところ、フォーカスしているとき、フォーカスしていないときの送信ボタンの表示・非表示は問題ないですが、送信ボタンを押してもコメントが投稿できなくなってしまいました。
該当のソースコード
javascript
1$(document).on('turbolinks:load', function(){ 2 $("#comment_body").focus(function(){ 3 $(".post-show-main__comment-box").slideDown(); 4 }); 5 $("#comment_body").blur(function(){ 6 $(".post-show-main__comment-box").css("display", "none"); 7 }); 8 $("#comment_body").submit(function(){ 9 $(".post-show-main__comment-box").css("display", "none"); 10 }); 11}); 12
css
1.post-show-main__comment-box { 2 display: none; 3} 4
html
1<div class="post-show-main__title">コメント一覧</div> 2 3 <form class="new_comment" id="new_comment" action="/posts/29/comments" accept-charset="UTF-8" method="post"> 4 <input name="utf8" type="hidden" value="✓" /> 5 <input type="hidden" name="authenticity_token" value="~~~" /> 6 <textarea placeholder="コメント入力欄" autocomplete="off" class="grey lighten-5 new_text_field materialize-textarea post-show-main__textarea" name="comment[body]" id="comment_body"> 7 </textarea> 8 <button class="post-show-main__comment-box waves-effect waves-light btn-small" type="submit" name="action"> 9 <input type="submit" name="commit" value="コメントする" data-disable-with="コメントする" /> 10 <i class="material-icons right">comment</i> 11 </button> 12 </form> 13
試したこと
submitされる前に送信ボタンが消えてしまうのが原因かと思い
$("#comment_body").blur(function(){
$(".post-show-main__comment-box").css("display", "none");
});
と
$("#comment_body").submit(function(){
$(".post-show-main__comment-box").css("display", "none");
});
をの順番を入れ替えたりしてみましたがうまくいきません。
$("#comment_body").blur(function(){ 〜 の部分を削除すれば送信はできますが、それだとフォーカスを外した時に送信ボタンが非表示になりません。
textareaにフォーカスした時、フォーカスを外した時に送信ボタンの表示・非表示の切り替えができ、かつ送信も問題なくできるようにするにはどうしたら良いでしょうか?
ご教授お願いします!
回答1件
あなたの回答
tips
プレビュー