.net的enter鍵的默認提交

在.net頁面的文本框裏,按enter鍵會默認提交form表單,填的數據就會clear掉多數時候確實帶來了很好的用戶體驗,輸入數據後,手不用離開鍵去亂摸鼠標就能完成表單的提交。但總有例外不想要這種默認行爲,一定有的,你遇到了就知道的,比如想在文本框中回車做別的事情,那就要點技巧的。

很多人可能會告訴你對文本框加個事件,回車的時候把 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;


這裏就是要在文本框的鍵盤事件中當回車時阻止瀏覽器的下一步默認行爲,高版本的瀏覽器都趨於規範化了,所以可以 IE7 及以上版本或其他的瀏覽器中都可以用 e.preventDefault(); 方法了。在你的網頁中爲文本框附加下面代碼就行了:
$(document).ready(function() {    
$("#txt").keypress(function(event) {
        if (event.keyCode == 13) {   
                      event.preventDefault();    
            //do some of your things     
    }
    });
});
以上代碼用了最流行的 jQuery 來附加事件函數。這樣可以試下,在 IE7/IE8 的兼容模式下、Opera、FireFox 文本框中按回車都不再提交表單了。
對於 IE 瀏覽器,用 window.event.returnValue = false;
來替代 event.preventDefault(); 也是可以的,其實不防加個瀏覽器判斷把 window.event.returnValue = false; 
也寫保險些,反正用 jQuery 判斷瀏覽器也方便,注意不是 event.returnValue = false; 哦,window 少不得。
當然若是在表單中沒有放置提交按鈕,文本框中任何時候按回車都不會提交,加上個提交按鈕,即使是個隱藏的提交按鈕後文本框才能獲得這種默認行爲。
所以這也給了我們另一種解決回車不提表單的解決辦法,把提交按鈕改爲普通按鈕,給該普通按鈕加個 οnclick="this.form.submit()" 即可。
總結一下有三種辦法:
1. 給文本框加個 keydown 事件,阻止瀏覽器的默認提交行爲 2. 提交按鈕改爲普通按鈕,onclick 中進行表單提交 3. 給表單加個隱藏的密碼框也能達到如此效果
另外再加一個取巧的辦法,給表單加一個不可見的 <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;
            }
        });


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章