自定义CSS输入框导致页面刷新的ENTER键
问题描述:
可能重复:
Stop Enter/Return key submitting a form自定义CSS输入框导致页面刷新的ENTER键
我试图创建一个简单的使用搜索表单的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()"/> 
<input class="searchbutton" type="button" value="Album" onclick="queryAlbum()"/>
</form>
</div>
答
您需要防止的形式从表演上输入这是提交表单的默认操作。
这有点儿沉重,你会想为你的情况选择合适的表单,但基本上你只需要返回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; }
你会怎么做没有jQuery的? – 2012-07-18 05:01:41
使用非jQuery方式更新答案。 – Bill 2012-07-18 05:10:14
嗯,这似乎没有任何效果。 – 2012-07-18 05:22:49