js與jquery實現搜索框提示文字顯示與隱藏

在作網站搜索時，咱們每每會想到一種很人性化的一點，就是顯示提示文字，通常這種效果不少見的，通俗的講就是鼠標不放上的時候，顯示一個「請輸入文字」，鼠標放上去的時候，這個文字消失，用js的理解的話，就是鼠標得到焦點的時候更換input的value值，好了，這種效果的代碼寫法有不少種，你們先看代碼：

方法一：一行js代碼搞定

<input type="text" name="s" value="提示文字" onfocus="if (value =='提示文字'){value =''}" onblur="if (value ==''){value='提示文字'}" />

方法二：一段簡單的jquery搞定 先上html的form的代碼

<form action="" method="post">     
<input type="text" name="keyword" id="keyword" value="請輸入關鍵詞！"/>     
<input type="submit" name="submit" value="提交"/>     
</form>

再是jquery的代碼：

$(document).ready(function()    {         
//搜索框      
    $('#keyword').focus(function() {      
        if($(this).val() == '請輸入關鍵詞！') {      
            $(this).val("");      
        }      
    });      
    $('#keyword').blur(function(){      
        if($(this).val() == "") {      
            $(this).val('請輸入關鍵詞！');      
        }      
    });      
});

轉載自:http://www.9958.pw/post/js_search_input_title