自定義CSS輸入框導致頁面刷新的ENTER鍵

Question

可能重複：
Stop Enter/Return key submitting a form

我試圖創建一個簡單的使用搜索表單的CSS我在網上找到。我希望用戶能夠從文本框中按ENTER鍵，並讓用戶在沒有用戶點擊按鈕的情況下運行查詢。我試着在keydown上檢查ENTER鍵，但由於某種原因頁面不斷刷新。這個刷新的原因是什麼？

.searchform { 
    display: inline-block; 
    zoom: 1; /* ie7 hack for display:inline-block */ 
    *display: inline; 
    border: solid 1px #d2d2d2; 
    padding: 3px 5px; 

    -webkit-border-radius: 2em; 
    -moz-border-radius: 2em; 
    border-radius: 2em; 

    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); 
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); 
    box-shadow: 0 1px 0px rgba(0,0,0,.1); 

    background: #f1f1f1; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); 
    background: -moz-linear-gradient(top, #fff, #ededed); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ 
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ 
} 
.searchform input { 
    font: normal 12px/100% Arial, Helvetica, sans-serif; 
} 
.searchform .searchfield { 
    background: #fff; 
    padding: 6px 6px 6px 8px; 
    width: 202px; 
    border: solid 1px #bcbbbb; 
    outline: none; 

    -webkit-border-radius: 2em; 
    -moz-border-radius: 2em; 
    border-radius: 2em; 

    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
} 
.searchform .searchbutton { 
    color: #fff; 
    border: solid 1px #494949; 
    font-size: 11px; 
    height: 27px; 
    width: 35px; 
    text-shadow: 0 1px 1px rgba(0,0,0,.6); 

    -webkit-border-radius: 2em; 
    -moz-border-radius: 2em; 
    border-radius: 2em; 

    background: #5f5f5f; 
    background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); 
    background: -moz-linear-gradient(top, #9e9e9e, #454545); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ 
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ 
} 

#search {margin-top:30px; marin-right:auto;} 

有以下形式：

<div align="center" id="search"> 
    <form class="searchform"> 
     <input class="searchfield" style="color:#636363" type="text" value="Title/Album..." onkeydown="if (event.keyCode == 13) {querySong();}" onfocus="if (this.value == 'Title/Album...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Title/Album...';}" /> 
    </form> 
    <form class="searchform"> 
     <input class="searchfield" style="color:#636363" type="text" value="Artist..." onkeydown="if (event.keyCode == 13) {querySong();}" onfocus="if (this.value == 'Artist...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Artist...';}" /> 
     <input class="searchbutton" type="button" value="Song" onclick="querySong()"/>&nbsp 
     <input class="searchbutton" type="button" value="Album" onclick="queryAlbum()"/> 
    </form> 
</div> 

Answer 1

您需要防止的形式從表演上輸入這是提交表單的默認操作。

這有點兒沉重，你會想爲你的情況選擇合適的表單，但基本上你只需要返回false來防止默認行爲。

$('form').submit(function() { return false; }); 

或者沒有jQuery的

var el = document.getElementById('formId'); 

if (el.addEventListener) { 
    el.addEventListener('submit', preventDefaultAction, false); 
} else if (el.attachEvent) { 
    el.attachEvent('submit', preventDefaultAction); 
} 

var preventDefaultAction = function() { return false; }