Создание формы ввода внутри текстового поля с помощью jquery?

Question

Я создал форму textarea (вместо создания списка ul), где он отобразит все сообщения пользователей, я также создал форму ввода, в которой пользователь вводит свое сообщение. Я хотел бы, чтобы форма ввода появится на текстовое поле, когда курсор пользователя балансирует на текстовое поле, как показано на рисунке здесь

<form id="message-form" action="#" method="post"> 
    <input id="message" placeholder="Write your message here...> 
      <button type="submit">Send Message</button> 
    <button type="button" id="close">Close Connection</button> 
</form> 

Answer 1

Вам не нужно Jquery что-то вроде этого; просто использовать CSS:

input.focus-actions:focus + .submit { 
    display: block; 
} 
.submit { 
    display: none; 
} 

Где ваш HTML может выглядеть следующим образом:

<form action = "/"> 
    <fieldset> 
     <legend>My Focus Form</legend> 
     <input type = "text" class = "focus-actions" placeholder = "Write your message here..." required autofocus/> 
     <footer class = "submit"> 
      <button type = submit>Send Message</button> 
      <button>Close</button> 
     </footer> 
    </fieldset> 
</form> 

Кроме того, если вы хотите, чтобы исчезнуть, вы можете использовать анимацию:

.submit { 
    -webkit-animation: fadeIn 1s ease; 
    -o-animation: fadeIn 1s ease; 
    animation: fadeIn 1s ease; 
} 
@-moz-keyframes fadeIn { 
    0% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    } 
    100% { 
    -ms-filter: none; 
    filter: none; 
    opacity: 1; 
    } 
} 
@-webkit-keyframes fadeIn { 
    0% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    } 
    100% { 
    -ms-filter: none; 
    filter: none; 
    opacity: 1; 
    } 
} 
@-o-keyframes fadeIn { 
    0% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    } 
    100% { 
    -ms-filter: none; 
    filter: none; 
    opacity: 1; 
    } 
} 
@keyframes fadeIn { 
    0% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    } 
    100% { 
    -ms-filter: none; 
    filter: none; 
    opacity: 1; 
    } 
}