鍵盤迴車事件導致頁面刷新的問題

我最近在做一個 Ajax 查詢的功能，代碼如下：

<form name="keywordForm" method="post" action=""> 
  <p id="profile_nav"> 
    <label for="profile"> 關鍵字搜索： </label> 
    <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" /> 
    <input type="button" value="搜索" onClick="searchKeyword()"> 
  </p>
</form>

在文本框中輸入關鍵字按回車，頁面自動刷新了，結果肯定是沒有實現無刷新搜索了。想了想，可能是按回車後默認提交了表單，於是將form去掉，果然不刷了。但是還是會有很多地方需要用到form。

一個表單下，如果只有一個文本框時，按下回車將會觸發表單的提交事件。

既然是隻有一個文本框纔會出問題，那麼可以加一個隱藏的文本框，如下：

<input id="hiddenText" type="text" style="display:none" />

現在代碼成了這樣：

<form name="keywordForm" method="post" action=""> 
    <p id="profile_nav"> 
    <label for="profile"> 關鍵字搜索： </label> 
    <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" /> 
    <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />
    <input type="button" value="搜索" onClick="searchKeyword()"> 
  </p>
</form>

結論是，可以採取兩種方法解決這種問題：1.去掉表單；2.如果非得用表單，只要不讓表單裏有且只有一個文本框就OK了。
如果以上的方法還不足以讓你去解決問題，那麼你可以用以下方法來阻止因爲回車而引起的表單自動提交：

<form name="keywordForm" method="post" action="" onsubmit="return false;"> 
  <p id="profile_nav"> 
    <label for="profile"> 關鍵字搜索： </label> 
    <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" /> 
    <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />
    <input type="button" value="搜索" onClick="searchKeyword()"> 
  </p>
</form>

就是在表單 form 後面加上一個 onsubmit 事件，返回 false，來阻止 form 提交。

詳情請查考我的博客 http://www.andylistudio.com/2017/05/23/submit_page_flush/