Question

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

<input type="text" />

如何实现这一目标？ JavaScript的？任何信息或指针都会非常有用。我对JavaScript不是很熟悉，但是对于该解决方案的良好资源将不胜感激。

Answer 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');
});

Answer 2

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

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

2 个答案: