文字框失去焦時間點事件、獲得焦時間點事件
onBlur:當失去輸入焦點後產生該事件
onFocus:當輸入獲得焦點後，產生該檔案
Onchange:當文字值改變時，產生該事件
Onselect:當文字加亮後，產生該檔案
onpropertychange 當屬性改變發生該事件
無論粘貼 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實現方法
對於元素的焦時間點事件，我們可以使用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('搜神馬？');
});
})
好了相當的不錯吧
下面是一個簡單的例子：
複製代碼 代碼如下:
<!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的內容就是我們在頁面上看到的內容。
代碼如下：
複製代碼 代碼如下:
<input type="text" value="" placeholder="請輸入內容" />
第二種： jQuery
原理：讓表單的val值等於其title值。
代碼如下：
複製代碼 代碼如下:
<input type="text" value="" 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>
文字框獲得焦點、失去焦點調用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>
