VaStO_LoRdE
New Member
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?\[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
XImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progidXImageTransform.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: progidXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progidXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */}#search {margin-top:30px; marin-right:auto;}\[/code\]With the following form: \[code\]<div align="center" id="search"> <form class="searchform"> <input class="searchfield" style="color:#636363" type="text" value="http://stackoverflow.com/questions/11534422/Title/Album..." onkeydown="if (event.keyCode == 13) {querySong();}" onfocus="if (this.value =http://stackoverflow.com/questions/11534422/='Title/Album...') {this.valuehttp://stackoverflow.com/questions/11534422/= '';}" onblur="if (this.value =http://stackoverflow.com/questions/11534422/='') {this.valuehttp://stackoverflow.com/questions/11534422/= 'Title/Album...';}" /> </form> <form class="searchform"> <input class="searchfield" style="color:#636363" type="text" value="http://stackoverflow.com/questions/11534422/Artist..." onkeydown="if (event.keyCode == 13) {querySong();}" onfocus="if (this.value =http://stackoverflow.com/questions/11534422/='Artist...') {this.valuehttp://stackoverflow.com/questions/11534422/= '';}" onblur="if (this.value =http://stackoverflow.com/questions/11534422/='') {this.valuehttp://stackoverflow.com/questions/11534422/= 'Artist...';}" /> <input class="searchbutton" type="button" value="http://stackoverflow.com/questions/11534422/Song" onclick="querySong()"/>  <input class="searchbutton" type="button" value="http://stackoverflow.com/questions/11534422/Album" onclick="queryAlbum()"/> </form></div>\[/code\]
XImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progidXImageTransform.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: progidXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progidXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */}#search {margin-top:30px; marin-right:auto;}\[/code\]With the following form: \[code\]<div align="center" id="search"> <form class="searchform"> <input class="searchfield" style="color:#636363" type="text" value="http://stackoverflow.com/questions/11534422/Title/Album..." onkeydown="if (event.keyCode == 13) {querySong();}" onfocus="if (this.value =http://stackoverflow.com/questions/11534422/='Title/Album...') {this.valuehttp://stackoverflow.com/questions/11534422/= '';}" onblur="if (this.value =http://stackoverflow.com/questions/11534422/='') {this.valuehttp://stackoverflow.com/questions/11534422/= 'Title/Album...';}" /> </form> <form class="searchform"> <input class="searchfield" style="color:#636363" type="text" value="http://stackoverflow.com/questions/11534422/Artist..." onkeydown="if (event.keyCode == 13) {querySong();}" onfocus="if (this.value =http://stackoverflow.com/questions/11534422/='Artist...') {this.valuehttp://stackoverflow.com/questions/11534422/= '';}" onblur="if (this.value =http://stackoverflow.com/questions/11534422/='') {this.valuehttp://stackoverflow.com/questions/11534422/= 'Artist...';}" /> <input class="searchbutton" type="button" value="http://stackoverflow.com/questions/11534422/Song" onclick="querySong()"/>  <input class="searchbutton" type="button" value="http://stackoverflow.com/questions/11534422/Album" onclick="queryAlbum()"/> </form></div>\[/code\]