title: Custom CSS input box causing page to refresh on ENTER key
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/10313032/stop-enter-return-key-submitting-a-form">Stop Enter/Return key submitting a form</a>  </p>
  </blockquote>
  
  
  
  <p>I am trying to create a simple search form using css I found online. I want users to be able to hit the ENTER key from within a textbox and have it run a query without having the user to click on the button. I tried checking for the ENTER key on keydown, but the page keeps refreshing for some reason. What is the cause of this refresh?</p>
  
  <pre><code>.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;}
  </code></pre>
  
  <p>With the following form: </p>
  
  <pre><code>&lt;div align="center" id="search"&gt;
      &lt;form class="searchform"&gt;
          &lt;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...';}" /&gt;
      &lt;/form&gt;
      &lt;form class="searchform"&gt;
          &lt;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...';}" /&gt;
          &lt;input class="searchbutton" type="button" value="Song" onclick="querySong()"/&gt;&amp;nbsp
          &lt;input class="searchbutton" type="button" value="Album" onclick="queryAlbum()"/&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>