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

下面是html中的簡(jiǎn)單form表單：

1、一個(gè)id是keywords的搜索框；
2、placeholder是文本框默認(rèn)提示文字；
3、onkeydown是在該文本框中按下動(dòng)作時(shí)觸發(fā)事件，event.keyCode==13表示按下的是“ENTER”回車鍵，觸發(fā)JavaScript的formsubmit函數(shù)。注意這里有return。
4、點(diǎn)擊“搜索”按鈕會(huì)觸發(fā)formsubmit函數(shù)
備注：點(diǎn)擊“搜索”按鈕和搜索框內(nèi)enter回車鍵觸發(fā)的時(shí)同一個(gè)函數(shù)

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

下面是JavaScript的formsubmit函數(shù)：

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

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

如果不需要提交URL偽靜態(tài)，可以直接在form中action里寫入url，也可以在JavaScript中改變form中action的值，進(jìn)行form提交。keywords就會(huì)變成參數(shù)加到跳轉(zhuǎn)鏈接里。

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

總結(jié)：上面的例子介紹了form使用javascript提交時(shí)，點(diǎn)擊“搜索”按鈕能提交，搜索框內(nèi)也能使用enter回車鍵提交的方法和代碼。詳細(xì)解釋了原理和各個(gè)代碼的含義，簡(jiǎn)單易懂，便于學(xué)習(xí)。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)form提交，回車提交URL地址偽靜態(tài)的文章就介紹到這了,更多相關(guān)js實(shí)現(xiàn)form提交URL地址偽靜態(tài)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論