本案例使用js方式及jquery实现页面中的搜索框，按回车键与按按钮响应达到相同的效果。

<body><inputid="sousuo"type="text"placeholder="搜你想要的"><inputtype="button"id="sub"value="搜索"><divid="ti"></div></body>原生js实现：window.onload=function(){varsousuoobj=document.getElementById('sousuo');vartiobj=document.getElementById("ti");varsubobj=document.getElementById('sub');//点击按钮响应的函数操作，复习了以前的几个函数。functionsearch(){varvalue=sousuoobj.value;if(value){varpara=document.createElement("p");vartext=document.createTextNode("搜索的内容为"+value);tiobj.appendChild(para.appendChild(text));}}subobj.addEventListener("click",search,false);sousuoobj.addEventListener("keyup",function(event){varevent=event||window.event;if(event.keyCode==13){search();}});}Jquery实现：$(function(){functionsearch(){varvalue=$('#sousuo').val();if(value){$('#ti').append("<p>搜索的内容为："+value+"</p>");}};$("#sub").on("click",search);$("#sousuo").on("keyup",function(event){varevent=event||window.enent;if(event.keyCode==13){search();}})})


效果图：

填入搜索内容，比如：51cto,按回车键，或者搜索按钮弹出：

二．分析，这个实现<input>不要有父元素<form>,因为，表单会有默认行为；

例如：

<formaction="jshuanfu.html"id="form1"method=”post”><inputid="sousuo"type="text"placeholder="搜你想要的"><inputtype="button"id="sub"value="搜索"><divid="ti"></div></form>

这种情况点击按钮，或者回车响应，都直接跳转到了jshuanfu.html这个页面，这就是表单的默认行为。

要使用必要的代码阻止默认行为，return false;是能够阻止表单提交的。

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。

例如：

<formaction="jshuanfu.html"id="form1"onsubmit="returncheck()"><inputid="sousuo"type="text"placeholder="搜你想要的"><inputtype="button"id="sub"value="搜索"><divid="ti"></div></form>Js处理：varform1=document.getElementById("form1");varsousuoobj=document.getElementById('sousuo');vartiobj=document.getElementById("ti");varsubobj=document.getElementById('sub');functionsearch(){varval=sousuoobj.value;if(val){varpara=document.createElement("p");vartext=document.createTextNode("搜索的内容为"+val);tiobj.appendChild(para.appendChild(text));returnfalse;}}functioncheck(){if(search()){alert("hahha");returntrue;}else{returnfalse;}}也可以使用，event.preventDefaule()或window.event.returnValue=false的方式阻止表单的提交。例如：varform1=document.getElementById("form1");varsousuoobj=document.getElementById('sousuo');vartiobj=document.getElementById("ti");varsubobj=document.getElementById('sub');form1.onsubmit=function(event){varevent=event||window.event;varval=sousuoobj.value;if(val){varpara=document.createElement("p");vartext=document.createTextNode("搜索的内容为"+val);tiobj.appendChild(para.appendChild(text));if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;}}}

实现效果图：与上面图一样：

总结：在这几个例子的学习中，学到了：

（1）回车响应的实现（js与jquery）。

（2）阻止表单的默认行为。使用return false;或者通过event.preventDefaule()或window.event.returnValue=false的方式阻止表单的提交。

（3）表单中的回车响应：

表单中的回车响应是浏览器实现的：

1）如果表单里只有一个type=”submit”的按钮，回车键生效；

2）如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效

3）radio和checkbox在FX下也会触发提交表单，在IE下不会

4）type为p_w_picpath的按钮，等同于type为submit的效果

(4)完整的表单案例，请查看下篇文章http://xiyin001.blog.51cto.com/9831864/1764012，<js实现注册页面>。