Javascript 网页中的鼠标光标或键盘响应

我有这样一个网页的愿望。文本搜索框最初放置在html页面的中心。当用户访问此页面并单击搜索框中的文本字段键入内容时，此搜索框现在位于页面顶部，用户可以开始键入内容。此页面上所有其他元素或组件的布局和位置不变。此搜索框的HTML如下所示：

<input type="text" />

---

如何实现这一点？JavaScript？任何信息或指针都会非常有用。我对JavaScript不是很熟悉，但是如果您能为解决方案提供好的资源，我将不胜感激。

您可以使用css选择器

：selected

.element1 {
  position: absolute;
  top: 50%;
  /* or whatever styles to move it to center*/
}


.element1:focus {
  position: static;
  border: 1px solid red;
  outline: none!important;
  /* or whatever styles to move it to top*/
}

检查以下JSFIDLE：

更新

根据您的评论，我认为您需要JavaScript或Jquery。看看新的小提琴，更新的代码：

基本上，您需要添加另一个类并将样式应用于新类

$('.element1:not(.moved)').on('focus', function (ev) {
    $(ev.target).addClass('moved');
});

纯CSS解决方案：

#框，#按钮{
位置：绝对位置；
最高：50%；
左：50%；
边缘顶部：5px；
-webkit过渡：前2名；/*Safari*/
过渡：前2名；
-webkit转换延迟：9999s；/*Safari*/
转换延迟：9999s；
}
#框：聚焦，#框：聚焦#按钮{
位置：绝对位置；
最高：0%；
左：50%；
边缘顶部：5px；
-webkit转换延迟：1s；/*Safari*/
过渡延迟：1s；
}

您可以通过侦听文本框的更改事件来完成此操作。添加css类，如

位置：固定；排名：0这就是你要找的吗？所以我只是使用JavaScript来使用它？关于如何在HTML中使用thin，你能说得具体一点吗？你是说不使用JavaScript？是的，您可以只给您的输入HTML元素一个类或id。例如，您为输入元素指定了“element1”作为类名，然后您可以编写两种不同的样式，一种是当焦点位于文本框内时的样式，另一种是当焦点不在文本框上时的样式
.element1
样式将始终应用于输入元素
.element 1：仅当用户关注此元素时，才会应用选定的
样式。您可以查看JSFIDLE以获得进一步的参考。我希望盒子保持在顶部，一旦它到了那里，不管鼠标如何移动。只有当用户重新启动浏览器时，搜索框才会放在中间。嗨，Kishor，新的JavaScript放在哪里？在html页面中？这不起作用，因为当您在框外单击鼠标时，框会再次回到页面中心。那不是我需要的。请看我的评论。它似乎有效。唯一的问题是，它向上移动非常缓慢。它能立即移动吗？只需更改以下值：“-webkit transition:top 2s；/*Safari*/transition:top 2s；”（2秒是条移动到顶部的时间。您可以更改它，例如：0.5s）要更改移动开始前的延迟，请更改以下值：“-webkit转换延迟：1s；/*Safari*/转换延迟：1s；“9999s”是什么意思？也就是说9999秒后，盒子会掉下来？