溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本案例使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
