本案例使用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为image的按钮，等同于type为submit的效果
时间： 2024-11-10 18:50:11