js 回車提交表單的實現


我們有時候希望回車鍵敲在文本框(input element)里來提交表單(form),但有時候又不希望如此。比如搜索行為,希望輸入完關鍵詞之后直接按回車鍵立即提交表單,而有些復雜表單,可能要避免回車鍵誤操作在未完成表單填寫的時候就觸發了表單提交。
要控制這些行為,不需要借助JS,瀏覽器已經幫我們做了這些處理,這里總結幾條規則:
   1. 如果表單里有一個type=”submit”的按鈕,回車鍵生效。
   2. 如果表單里只有一個type=”text”的input,不管按鈕是什么type,回車鍵生效。
   3. 如果按鈕不是用input,而是用button,並且沒有加type,IE下默認為type=button,FX默認為type=submit。
   4. 其他表單元素如textarea、select不影響,radio checkbox不影響觸發規則,但本身在FX下會響應回車鍵,在IE下不響應。
   5. type=”image”的input,效果等同於type=”submit”,不知道為什么會設計這樣一種type,不推薦使用,應該用CSS添加背景圖合適些。
6.我們在處理表單的頁面可以檢驗他是否點擊了按鈕來控制下面的程序。if($_POST['submit']){ 如果點擊了按鈕 程序繼續}
實際應用的時候,要讓表單響應回車鍵很容易,保證表單里有個type=”submit”的按鈕就行。而當只有一個文本框又不希望響應回車鍵怎么辦 呢?我的方法有點別扭,就是再寫一個無意義的文本框,隱藏起來。根據第3條規則,我們在用button的時候,盡量顯式聲明type以使瀏覽器表現一致。
通過以上可知只要把type="submit"改成type="button"然后js提交, 在不要有一個type=”text”的input就行了。就不會發生回車跳轉。
但實驗發現,ie和火狐不一樣,火狐的submit按鈕有掩藏的(display:block)和顯現的都不行,必須全改,但ie只要顯現的沒有submit就行了。

 

<script type="text/javascript">   

    document.onkeydown=keyDownSearch;
   
    function keyDownSearch(e) { 
        // 兼容FF和IE和Opera 
        var theEvent = e || window.event; 
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode; 
        if (code == 13) {  
            DoSomeThing();//具體處理函數 
            return false; 
        } 
        return true; 
    }
</script>

如果只是針對某個DIV層應用回車查詢的話,可以將:
&nbsp;document.onkeydown=keyDownSearch;
改成:
document.getElementById('層ID').onkeydown=keyDownSearch; 

 

 

 

 

兩種情況,僅供參考。具體實現還需結合自身頁面。


一、整個頁面用一個回車提交事件:

<input type="button" value="回車提交" id="auto" onclick="alert('你按了回車')"/>
<script type="text/javascript">
    document.onkeydown = function(e){
        if(!e) e = window.event;//火狐中是 window.event
        if((e.keyCode || e.which) == 13){
            document.getElementById("auto").click();
        }
    }

</script>

二、某個輸入框中注冊回車事件,一般用於用戶在頁面輸入后按回車:

<script>
function enterIn(evt){
  var evt=evt?evt:(window.event?window.event:null);//兼容IE和FF
  if (evt.keyCode==13){
  var obj ;
  queryDistrict(obj,2);
}
}
</script>

<input type="text" id ="input1" maxlength="3" onkeydown="enterIn(event);"/> 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM