2

重複の可能性：
フォームの送信を停止するEnter/Returnキー

オンラインで見つけたcssを使用して簡単な検索フォームを作成しようとしています。ユーザーがテキストボックス内からEnterキーを押して、ユーザーがボタンをクリックしなくてもクエリを実行できるようにしたいと思います。キーダウン時に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>
4

1 に答える 1

2

フォームを送信するEnterで、フォームがデフォルトのアクションを実行しないようにする必要があります。

これは少し手間がかかるので、ケースに適したフォームを選択する必要がありますが、基本的には、デフォルトの動作を防ぐために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; }
于 2012-07-18T04:58:14.017 に答える