Asp.Net mvc 讓文字框在按斷行符號鍵時表單不提交

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;

這裡就是要在文字框的鍵盤事件中當斷行符號時阻止瀏覽器的下一步預設行為，高版本的瀏覽器都趨於正常化了，所以可以 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 少不得。
當然若是在表單中沒有放置提交按鈕，文字框中任何時候按斷行符號都不會提交，加上個提交按鈕，即使是個隱藏的提交按鈕後文字框才能獲得這種預設行為。所以這也給了我們 另一種解決斷行符號不提表單的解決辦法，把提交按鈕改為普通按鈕，給該普通按鈕加個 onclick="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;
            }
        });