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

时间:2016-02-04 05:32:02

标签: javascript jquery html css

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

<input type="text" />

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

2 个答案:

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