文本框（input element）里輸入內容后，直接Enter回車鍵提交表單（form），是很方便的，也很人性化，便于用戶使用。比如一個搜索框，希望輸入完關鍵詞之后直接按回車鍵立即提交表單，但如果不使用form提交，用JavaScript來實現提交動作，而且提交URL地址偽靜態化，不想帶問號和搜索關鍵詞，搜索框內enter回車鍵自動提交，那么應該如何實現呢。筆者下面將用實際代碼來展示。

下面是html中的簡單form表單：

1、一個id是keywords的搜索框；
2、placeholder是文本框默認提示文字；
3、onkeydown是在該文本框中按下動作時觸發事件，event.keyCode==13表示按下的是“ENTER”回車鍵，觸發JavaScript的formsubmit函數。注意這里有return。
4、點擊“搜索”按鈕會觸發formsubmit函數
備注：點擊“搜索”按鈕和搜索框內enter回車鍵觸發的時同一個函數

<form id="form" method="get" action="">
    <input type="text" id="keywords" name="keywords" value="" placeholder="請輸入關鍵詞" onkeydown="if(event.keyCode==13){return formsubmit();}"/>
    <input type="button" value="搜索" onClick="formsubmit()">
</form>

下面是JavaScript的formsubmit函數：

1、獲取文本框keywords的輸入值，如果為空提示“請輸入查詢關鍵詞！”；如果存在keywords進行下一步
2、用keywords取得的，偽造URL偽靜態鏈接（后端程序設計好）
3、window.location.href跳轉到url頁面
4、注意這里的return false，可以使得上面的form不主動提交

<script>
    function formsubmit(){
var keywords = $("#keywords").val();
if (keywords) {
    url = "/search/"+keywords+".html";
    window.location.href = url;
}else{
    $("#keywords").focus();
    alert("請輸入查詢關鍵詞！");
}
return false;
    }
</script>

如果不需要提交URL偽靜態，可以直接在form中action里寫入url，也可以在JavaScript中改變form中action的值，進行form提交。keywords就會變成參數加到跳轉鏈接里。

<script>
    function formsubmit(){
var keywords = $("#keywords").val();
if (keywords) {
    url = "search.php";
    $("#form").attr("action",url);
    $("#form").submit();
}else{
    $("#keywords").focus();
    alert("請輸入查詢關鍵詞！");
}
return false;
    }
</script>

總結：上面的例子介紹了form使用javascript提交時，點擊“搜索”按鈕能提交，搜索框內也能使用enter回車鍵提交的方法和代碼。詳細解釋了原理和各個代碼的含義，簡單易懂，便于學習。

到此這篇關于JavaScript實現form提交，回車提交URL地址偽靜態的文章就介紹到這了,更多相關js實現form提交URL地址偽靜態內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！