實現搜索框點擊時提示文字消失離開時提示文字出現

時間 2019-11-12

標籤實現搜索點擊提示文字消失離開出現简体版

原文原文鏈接

搜索框點擊時提示文字消失離開時提示文字出現

該例爲一個搜索框，點擊搜索框後默認提示文字自動清除，離開再次顯示默認提示文字

<html>
<body>
<meta charset="utf-8" />
<title>CSS搜索框</title>
<style type="text/css"> .searchinput{ border-right-width: 0px; padding-left: 3px; width: 168px; font-family: arial; float: left; border-top-width: 0px; border-bottom-width: 0px; color: #636365; margin-left: 4px; font-size: 8pt; vertical-align: middle; border-left-width: 0px; margin-right: 3px; } .tab_search{ border-bottom: #cccccc 1px solid; border-left: #cccccc 1px solid; height: 25px; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; } .searchaction{ width: 28px; float: left; height: 21px; font-size: 14px; padding: 1px 1px 1px 1px ; } </style>
<form action="#" name="search">
    <table border="0" cellpadding="0" cellspacing="0" class="tab_search">
        <tr>
        <td>
            <input type="text" name="q" title="Search" class="searchinput" id="searchinput" value="請輸入商家名稱地址" onkeydown="if (event.keyCode==13) {}" onblur="if(this.value=='')value='請輸入商家名稱地址';" onfocus="if(this.value=='請輸入商家名稱地址')value='';" value="請輸入商家名稱地址" />
        </td>
        <td>
        <input type="submit" value="ok" width="21" height="17" class="searchaction" />
        </td>
        </tr>
    </table>
</form> 

</body>
</html>

實現點擊清除離開回來效果重點在於：

<input type="text" name="q" title="Search" class="searchinput" id="searchinput" value="請輸入商家名稱地址" onkeydown="if (event.keyCode==20) {}" onblur="if(this.value=='')value='請輸入商家名稱地址';" onfocus="if(this.value=='請輸入商家名稱地址')value='';" value="請輸入商家名稱地址" />