使用 jquery 在文本区域内弹出输入表单？答案

【问题标题】：Making an input form popup inside a textarea using jquery?使用 jquery 在文本区域内弹出输入表单？
【发布时间】：2014-08-12 20:08:54
【问题描述】：

我创建了一个 textarea 表单（而不是创建一个 ul 列表），它将显示所有用户的消息，我还创建了一个输入表单，用户可以在其中键入他们的消息。当用户的光标悬停在 textarea 上时，我想让输入表单出现在 textarea 上，如图所示

<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>

【问题讨论】：

标签： javascript jquery html css forms

【解决方案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;
  }
}

【讨论】：