Asp.Net 的 WebForm 中光標在文本框時按回鍵默認就會提交表單,多數時候確實帶來了很好的用戶體驗,輸入數據后,手不用離開鍵去亂摸鼠標就能完成表單的提交。但總有例外不想要這種默認行為,一定有的,你遇到了就知道的,比如想在文本框中回車做別的事情,那就要點技巧的。
很多人可能會告訴你對文本框加個事件,回車的時候把 keyCode 由 13 變為 9(其實 keyCode 變為 9 是使回車相當於 Tab 鍵的功能),不過還未完事,你並沒有阻止事態進一步蔓延,Form 還是提交了。
$(document).ready(function() {
$("#txt").keypress(function(event) {
if (event.keyCode == 13) {
event.keyCode = 9;
//do some of your things
}
});
});
其實你要了稍加解瀏覽器的冒泡的事件模型,知道怎么適時的阻止瀏覽器的默認行為,有一個鏈接 http://kb.cnblogs.com/a/1363417/ 值得看下,內容如下:
在前端開發工作中,由於瀏覽器兼容性等問題,我們會經常用到“停止事件冒泡”和“阻止瀏覽器默認行為”。
1..停止事件冒泡
JavaScript代碼
//如果提供了事件對象,則這是一個非IE瀏覽器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否則,我們需要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
return false;
2.阻止瀏覽器的默認行為
JavaScript代碼
//如果提供了事件對象,則這是一個非IE瀏覽器
if ( e && e.preventDefault )
//阻止默認瀏覽器動作(W3C)
e.preventDefault();
else
//IE中阻止函數器默認動作的方式
window.event.returnValue = false;
return false;
$(document).ready(function() {
以上代碼用了最流行的 jQuery 來附加事件函數。這樣可以試下,在 IE7/IE8 的兼容模式下、Opera、FireFox 文本框中按回車都不再提交表單了。
對於 IE 瀏覽器,用 window.event.returnValue = false;
當然若是在表單中沒有放置提交按鈕,文本框中任何時候按回車都不會提交,加上個提交按鈕,即使是個隱藏的提交按鈕后文本框才能獲得這種默認行為。
總結一下有三種辦法:
另外再加一個取巧的辦法,給表單加一個不可見的 <input type="password" style="display:none"> 也能引起按回車而不提交表單的。
附錄:
其實要用 jQuery 可以隨時隨地,直接通過 Google CDN 來加載就行,不用擔心 Google 會不會當掉,只會出現被牆掉的可能。
參考:http://code.google.com/apis/libraries/devguide.html#jquery,
用 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script> 加載 jquery 庫
或者用:<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>,
要先到 Google API key 注冊一個 Key,放到 INSERT-YOUR-KEY 位置,然后就隨時用如下的某一代碼加載任何你想要腳本庫:
google.load("chrome-frame", "1.0.2");
google.load("dojo", "1.5");
google.load("ext-core", "3.1.0");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.2");
google.load("mootools", "1.2.4");
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
google.load("swfobject", "2.2");
google.load("yui", "2.8.1");
google.load("webfont", "1.0.6");
----------------------------------------------------------------------
keydown事件
這個函數會調用執行綁定到keydown事件的所有函數,包括瀏覽器的默認行為。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行為。keydown事件會在鍵盤按下時觸發。
頁面一回車進行的操作
$(document).keydown(function(e){
e = e ? e : window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode==13)
{
//操作
return false;
}
});