Search Field

Search on press of Enter, but clear field contents and deselect field.

by James Wages

HTML

<body bgcolor="313131">

<!-- "this.reset();" causes no results to display in Safari on MacOS or Chrome for WinXP, but works fine in FF, IE, Chrome on MacOS/Win8.1 -->
<form action="https://kiramek.com/japanese/search_results.html" method=get onsubmit="this.submit(); this.reset(); loseFocus(); return false;">
<input id="Field" type="text" name="q" size=25 maxlength=128 accesskey="F" class="search" placeholder="site search...">
<input type=hidden name="cx" value="018348177762133457495:mdzyzovqz2q"><input type=hidden name="lr" value="lang_ja"><input type=hidden name="ie" value="UTF-8"><input type=hidden name="">
</form>

<br>
<font color=gray>
INSTRUCTIONS:<br>
1. Type "alarm" in the above field and hit Return.  You won't see any search results.
<br>
2. Click "Run" to get the search field back.<br>
3. Delete "this.reset();" in the HTML, then click "Run" and try again.  This time you get results!
<br><br>
TEST PAGE: <a href="https://kiramek.com/search-test.html">https://kiramek.com/search-test.html</a>
</font>

</body>

CSS

<style> 
input::-webkit-input-placeholder {color: #808080;}
input:-moz-placeholder {color: rgba(255,255,255,0.8);}
input::-moz-placeholder {color: rgba(255,255,255,0.8);}
input:-ms-input-placeholder {color: #808080;}
input, select, textarea{color: #fff;}

input[type=text] {
    width: 170px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    background-color: transparent;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDIzLjQgMjMuOCI+PGNpcmNsZSBjeD0iOS4zIiBjeT0iOS44IiByPSI0LjgiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMjIuNiAyMC42TDE2IDE0YzAuOC0xLjIgMS4yLTIuNyAxLjItNC4yIDAtNC40LTMuNS03LjktNy45LTcuOSAtNC40IDAtNy45IDMuNS03LjkgNy45IDAgNC40IDMuNSA3LjkgNy45IDcuOSAxLjUgMCAzLTAuNSA0LjItMS4ybDYuNiA2LjZMMjIuNiAyMC42ek05LjMgMTQuNmMtMi43IDAtNC44LTIuMi00LjgtNC44UzYuNiA1IDkuMyA1czQuOCAyLjIgNC44IDQuOFMxMiAxNC42IDkuMyAxNC42eiIgZmlsbD0iIzgwODA4MCIvPjwvc3ZnPg==");
    background-position: 10px 9px; 
    background-repeat: no-repeat;
    padding: 12px 10px 12px 45px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

textarea:focus, input:focus {color: #fff;}

input:focus::-webkit-input-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder {color: transparent;}

input[type=text]:focus {
    width: 100%;
    outline: none;
    background-color: rgba(0,0,0,0.3);
    border: 2px solid transparent;
    background-image:...

JavaScript

//clear & unselect search field on page load
window.onload = function(){
 document.getElementById("Field").value = "";
}
function loseFocus() {
//next line causes no results in Safari & Chrome on WinXP
//    document.getElementById("Field").value = "";
//same problem if "this.reset()" is used in <form action=...> in the HTML above
    document.getElementById("Field").blur();
}