先來看javascript的直接寫在了input上
復制代碼 代碼如下:
<input name="pwuser" type="text" id="pwuser" class="input" value="樓盤賬號" onBlur="if(this.value=='') this.value='樓盤賬號';" onFocus="if(this.value=='樓盤賬號') this.value='';" />
<input name="pwpwd" type="password" class="input1" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';">
jquery實現方法
對於元素的焦點事件,我們可以使用jQuery的焦點函數focus(),blur()。
focus():得到焦點時使用,和javascript中的onfocus使用方法相同。
如:
復制代碼 代碼如下:
$("p").focus(); 或$("p").focus(fn)
blur():失去焦點時使用,和onblur一樣。
如:
復制代碼 代碼如下:
$("p").blur(); 或$("p").blur(fn)
實例
復制代碼 代碼如下:
<form>
<label for="searchKey" id="lbSearch">搜神馬?</label> 這裡label覆蓋在文本框上,可以更好的控制樣式
<input id="searchKey" type="text" />
<input type="submit" value="搜索" />
</form>
jquery代碼
復制代碼 代碼如下:
$(function() {
$('#searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch').text('搜神馬?');
});
})
好了相當的不錯吧