キーボード最初表示とtoggle処理追加。

public_new/chat_room.html

@@ -22,7 +22,7 @@
   <nav>
     <div class="chat_room_src_form none">
       <div class="d-flex flex-row h-100 align-items-center">
-        <input type="search" name="search" placeholder="ユーザー検索">
+        <input type="search" name="search" id="searchMessage" placeholder="ユーザー検索">
         <span class="src_icon"></span>
         <a href="#" class="cancel">キャンセル</a>
       </div>

public_new/js/chat.js

@@ -281,6 +281,9 @@ $(function() {
         // フィルタ表示
         $('#filter').removeClass('none');
         $('#user_list').addClass('none');
+
+        $('.chat_room_src_form input[type="search"]').focus();
+        $('#searchMessage').addClass('onfocus');
     });
     $('.chat_room_src_form .cancel').click(function(){
         $('.nav_item_wrap').removeClass('none');
@@ -291,8 +294,25 @@ $(function() {
         // ユーザーリスト表示
         $('#filter').addClass('none');
         $('#user_list').removeClass('none');
+
+        $('.chat_room_src_form input[type="search"]').blur();
+        $('#searchMessage').removeClass('onfocus');
     });
 
+    $('.chat_room_src_form input[type="search"]').click(function() {
+        if($('#searchMessage').hasClass('onfocus')) {
+            $('#searchMessage').removeClass('onfocus');
+            $('#searchMessage').blur();
+        } else {
+            $('#searchMessage').addClass('onfocus');
+            $('#searchMessage').focus();
+        }
+    })
+
+    $('#searchMessage').blur(function() {
+        $('#searchMessage').removeClass('onfocus');
+    })
+
     // フィルタ選択イベント
     $('#filter .img_wrap').click(function(){
         // チェックアイコン追加
@@ -482,6 +502,7 @@ $(function() {
             jQueryMessages.append(noResultMsg);
         }
         if (e.key == "Enter" || e.KeyCode == 13) {
+            $('#searchMessage').removeClass('onfocus');
             $('#contact .search_form input[type="search"]').blur();
             return;
         }