質問: ### 前提・実現したいこと コメント投稿の機能において、jQueryを使用し、textareaにフォーカスしているときは送信ボタンを表示し、フォーカスしていないときは送信ボタンを非表示にする機能を実装したいと思っています。 ### 発生している問題・エラーメッセージ 下記のようなコードで実装したところ、フォーカスしているとき、フォーカスしていないときの送信ボタンの表示・非表示は問題ないですが、送信ボタンを押してもコメントが投稿できなくなってしまいました。 ### 該当のソースコード ``` $(document).on('turbolinks:load', function(){ $("#comment_body").focus(function(){ $(".post-show-main__comment-box").slideDown(); }); $("#comment_body").blur(function(){ $(".post-show-main__comment-box").css("display", "none"); }); $("#comment_body").submit(function(){ $(".post-show-main__comment-box").css("display", "none"); }); }); ``` ``` .post-show-main__comment-box { display: none; } ``` ``` コメント一覧 comment ``` ### 試したこと 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文字以上の文字が入力されていれば 送信ボタンが活性化する・・・くらいがちょうどいいのでは?