本案例使用js方式及jquery实现页面中的搜索框,按回车键与按按钮响应达到相同的效果。
<body> <input id="sousuo" type="text" placeholder="搜你想要的"> <input type="button" id="sub" value="搜索"> <div id="ti"></div> </body> 原生js实现: window.onload=function(){ var sousuoobj=document.getElementById('sousuo'); var tiobj=document.getElementById("ti"); var subobj=document.getElementById('sub'); //点击按钮响应的函数操作,复习了以前的几个函数。 function search(){ var value=sousuoobj.value; if(value){ var para=document.createElement("p"); var text=document.createTextNode("搜索的内容为"+value); tiobj.appendChild(para.appendChild(text)); } } subobj.addEventListener("click",search,false); sousuoobj.addEventListener("keyup",function(event){ var event = event || window.event; if(event.keyCode==13){ search(); } }); } Jquery实现: $(function(){ function search(){ var value=$('#sousuo').val(); if(value){ $('#ti').append("<p>搜索的内容为:"+value+"</p> "); } }; $("#sub").on("click",search); $("#sousuo").on("keyup",function(event){ var event=event||window.enent; if(event.keyCode==13){ search(); } }) })
效果图:
填入搜索内容,比如:51cto,按回车键,或者搜索按钮弹出:
二.分析,这个实现<input>不要有父元素<form>,因为,表单会有默认行为;
例如:
<form action="jshuanfu.html" id="form1" method=”post”> <input id="sousuo" type="text" placeholder="搜你想要的"> <input type="button" id="sub" value="搜索"> <div id="ti"></div> </form>
这种情况点击按钮,或者回车响应,都直接跳转到了jshuanfu.html这个页面,这就是表单的默认行为。
要使用必要的代码阻止默认行为,return false;是能够阻止表单提交的。
表单是一个包含表单元素的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签(<form>)定义。
例如:
<form action="jshuanfu.html" id="form1" onsubmit="return check()"> <input id="sousuo" type="text" placeholder="搜你想要的"> <input type="button" id="sub" value="搜索"> <div id="ti"></div> </form> Js处理: var form1=document.getElementById("form1"); var sousuoobj=document.getElementById('sousuo'); var tiobj=document.getElementById("ti"); var subobj=document.getElementById('sub'); function search(){ var val=sousuoobj.value; if(val){ var para=document.createElement("p"); var text=document.createTextNode("搜索的内容为"+val); tiobj.appendChild(para.appendChild(text)); return false; } } function check(){ if(search()){alert("hahha");return true;} else{ return false; } } 也可以使用,event.preventDefaule()或window.event.returnValue=false的方式阻止表单的提交。 例如: var form1=document.getElementById("form1"); var sousuoobj=document.getElementById('sousuo'); var tiobj=document.getElementById("ti"); var subobj=document.getElementById('sub'); form1.onsubmit=function(event){ var event = event || window.event; var val=sousuoobj.value; if(val){ var para=document.createElement("p"); var text=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实现注册页面>。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。