javascript - 在保存输入的输入文本框中输入字符后移动到新页面

Question

我想在我的网页中实现类似于谷歌搜索页面的东西。链接http://www.google.com在页面中间显示搜索字段，在输入字符时，它会移动到页面顶部，并保留输入的内容。

如果有人可以演示使用 jquery/javascript 或 html 来实现这一点，那就太好了

Answer 1

我只是为您准备了一个小脚本，以获取想法。在此过程中对其进行处理并阅读jquery 事件。这应该让你开始，http://jsfiddle.net/epinapala/uZ8xv/2/

顺便说一句，Gogole 不会将您重定向到即时搜索。t 移动 div，这个例子是一个非常小的原型来演示相同的。

<div class="block">
    <input id="ip" type="text" />
    <div class="res">NULL</div>
</div>  

div {
  position:absolute;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
  top:100px;
}​

​</p>

var d = false;

$("#ip").keyup(function(){
    if(d ==false){
    $(".block").animate({"top": "-=50px"});
        d= true;
    }
    var v =$(this).val();
    $(".res").html("Search results for " + v );
});

​</p>

Answer 2

使用keypress和appendTo

<div style="height:30px;" id="divMain">
    Move entire form below here on search
</div>
<br />
<div style="height:90px;" id="divOther">
<br />Some text...
<form id="frmSubmit">  
  Search: <input type="text" id="txtSearch" /><br />
  <input type="submit" value="Submit" />
</form>
</div>

jQuery：

$("#txtSearch").keypress(function() {
    $("#frmSubmit").appendTo("#divMain");
    $('#txtSearch').focus();
});​

最后：

jsFiddle 示例