文本框獲得焦點和失去焦點的判斷代碼

更新時間：2012年03月18日 13:46:47 作者：

今天想介紹一下文本框獲得焦點和失去焦點的兩種方法，需要的朋友可以參考下

文本框失去焦點事件、獲得焦點事件

onBlur:當失去輸入焦點后產(chǎn)生該事件
onFocus:當輸入獲得焦點后，產(chǎn)生該文件
Onchange:當文字值改變時，產(chǎn)生該事件
Onselect:當文字加亮后，產(chǎn)生該文件
onpropertychange 當屬性改變發(fā)生該事件
無論粘貼 keyup onchange等，最為敏感

先來看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實現(xiàn)方法

對于元素的焦點事件，我們可以使用jQuery的焦點函數(shù)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('搜神馬？');
});
})

好了相當?shù)牟诲e吧

下面是一個簡單的例子：

復制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>無標題文檔</title> 
</head> 
<script> 
function tt(){ 
var i=document.form1.text1.value; 

if(i.length>=6) 
document.getElementById("s1").innerHTML="用戶名不能大于6位"; 
else 
document.getElementById("s1").innerHTML=""; 
} 
function a(){ 
var j=document.form1.text2.value; 
if(j.length>=6) 
document.getElementById("s2").innerHTML="密碼不能大于6位" 
else 
document.getElementById("s2").innerHTML=""; 
} 


</script> 
<body> 
<form name="form1"> 
用戶名：<input type="text" id="text1" value="請輸入用戶名" onfocus="javascript:document.form1.text1.value=''" onblur="tt()"/> 
<span id="s1"></span><br /> 
密碼:<input type="text" id="text2" value="請輸入密碼" onfocus="javascript:document.form1.text2.value=''" onblur="a()"/> 
<span id="s2"></span><br /> 
<input type="button" id="button" value="登陸" /> 
</form> 
</body> 
</html> 

第一種： html5

html5給表單文本框新增加了幾個屬性，比如：email,tel,number,time,required,autofocus,placeholder等等，這些屬性給表單效果帶來了極大的效果變化。
其中placeholder就是其中一個，它可以同時完成文本框獲得焦點和失去焦點。必須保證input的value值為空， placeholder的內(nèi)容就是我們在頁面上看到的內(nèi)容。
代碼如下：

復制代碼代碼如下:

第二種： jQuery

原理：讓表單的val值等于其title值。
代碼如下：

復制代碼代碼如下:

復制代碼代碼如下:

 
<script type="text/javascript"> 
$(function() { 
var $input = $("input"); 
$input.each(function() { 
var $title = $(this).attr("title"); 
$(this).val($title); 
$(this).focus(function() { 
if($(this).val() === $title) { 
$(this).val(''); 
} 
}) 
.blur(function() { 
if($(this).val() === "") { 
$(this).val($title); 
} 
}); 
}); 
}); 
</script> 

文本框獲得焦點、失去焦點調(diào)用JavaScript

復制代碼代碼如下:

 
<%@ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>無標題頁</title> 
<script language="javascript"> 
function text1_onmouseover(it) 
{ 
it.focus(); 
it.select(); 
it.style.backgroundColor="red"; 
} 
function text1_onmouseout(it) 
{ 
it.onblur; 
it.style.backgroundColor="white"; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:TextBox ID="TextBox1" onmouseover="return text1_onmouseover(this);" onblur="text1_onmouseout(this)" runat="server"></asp:TextBox> 
</div> 
</form> 
</body> 
</html> 