文本框获得焦点与失去焦点检测判断方法

发布时间:2020-02-01编辑:脚本学堂
有关文本框获得焦点与失去焦点检测与判断方法,onBlur:当失去输入焦点后产生该事件,onFocus:当输入获得焦点后,产生该文件,更多方法见文中例子。

文本框失去焦点事件、获得焦点事件:
1、onBlur:当失去输入焦点后产生该事件
2、onFocus:当输入获得焦点后,产生该文件
3、Onchange:当文字值改变时,产生该事件
4、Onselect:当文字加亮后,产生该文件
5、onpropertychange 当属性改变发生该事件
无论粘贴 keyup onchange等,最为敏感

将js代码直接写在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>文本框获得焦点与失去焦点_www.jb200.com</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>

文本框获得焦点、失去焦点调用js脚本
 

复制代码 代码示例:
<%@ 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>文本框获得焦点、失去焦点 - www.jb200.com</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>