搜索框问题

Question

点击前效果点击后效果，如何实现，请说的具体点javascript

Answer 1

方法很多
常用
1.placeholder，不支持的可以用js来模拟
2. label ， 根据input内容来判断label隐藏与否

Answer 2

<input type="text" value="大金空调" df="大金空调" onfocus="if(this.value==this.getAttribute('df'))this.value='';" onblur="if(this.value=='')this.value=this.getAttribute('df');"/>

Answer 3

<input type"text" id="txtSearch" />
        <script type="text/javascript">
            String.prototype.trim =function(){
                return this.replace(/^\s+|\s+$/g, "");
            };            var txtSearch = document.getElementById("txtSearch");
            var orgValue = "大金空调",
                isInput = false,
                value = "";
            txtSearch.value = orgValue;
            txtSearch.onfocus = function () {
                if (!isInput) {
                    value = txtSearch.value.trim();
                    if (txtSearch.value == orgValue) {
                        txtSearch.value = "";
                    }
                }
            }
            txtSearch.onblur = function () {
                if (txtSearch.value.trim().length == 0) {
                    txtSearch.value = orgValue;
                    isInput = false;
                } else {
                    isInput = true;
                }
            }
        </script>

Answer 4

<style type="text/css">
input{
color:#C0C0C0
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("#abv").bind("focus",function(){
$(this).val("");
});
$("#abv").bind("blur",function(){
if($.trim($(this).val())==""){
$(this).val("大金空调");
}
});
})
 </script> 
<input id="abv" value="大金空调" type="text" />