gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:32:03 25 4
gpt4 key购买 nike

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

<input type="text" />

如何实现? JavaScript?任何信息或指针都会非常有帮助。我对 JavaScript 不是很熟悉,但是对于解决方案的良好资源将不胜感激。

最佳答案

纯 CSS 解决方案:

#box, #button {
position: absolute;
top: 50%;
left: 50%;
margin-top: 5px;

-webkit-transition: top 2s; /* Safari */
transition: top 2s;
-webkit-transition-delay: 99999s; /* Safari */
transition-delay: 99999s;
}

#box:focus, #box:focus ~ #button {
position: absolute;
top: 0%;
left: 50%;
margin-top: 5px;

-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
<html>
<head>
<base target=_blank>
</head>
<body bgcolor="#E6E6FA">

<form method=get action=http://www.google.com/search>
<input id=box type=text autocomplete=off maxlength=255 style=width:195px;margin-left:-125px />
<input id=button type=submit value=submit style=margin-left:75px />
</form>

</body>
</html>

关于javascript - 网页中的鼠标光标或键盘响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35193206/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com