我对网页有这样的渴望。文本搜索框最初放置在html页面的中心。当用户访问此页面并单击搜索框中的文本字段以键入内容时,此搜索框现在位于页面顶部,用户可以开始键入内容。此页面上所有其他元素或组件的布局和位置不会更改。此搜索框的HTML如下:
<input type="text" />
如何实现这一目标? JavaScript的?任何信息或指针都会非常有用。我对JavaScript不是很熟悉,但是对于该解决方案的良好资源将不胜感激。
答案 0 :(得分:1)
您可以使用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*/
}
检查以下JSFiddle:https://jsfiddle.net/jefsrp70/1/
更新
根据您的评论,我认为您需要JavaScript或Jquery。看看新的小提琴,更新代码:https://jsfiddle.net/jefsrp70/2/
基本上,您需要添加另一个类并将样式应用于新类
$('.element1:not(.moved)').on('focus', function (ev) {
$(ev.target).addClass('moved');
});
答案 1 :(得分:1)
纯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>