DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 在js(jquery)中獲得文本框焦點和失去焦點的方法
在js(jquery)中獲得文本框焦點和失去焦點的方法
編輯:關於JavaScript     

先來看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('搜神馬?');
});
})

好了相當的不錯吧

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved