jquery实现之文本框失去和得到焦点效果

时间:2022-10-05 19:52:32

jquery实现之文本框失去和得到焦点效果。

对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。

focus():得到焦点时使用,和javascript中的onfocus使用方法相同。

blur():失去焦点时使用,和onblur一样。 


示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>


<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").focus(function(){
var v=$(this).val();
if(v==this.defaultValue){
$(this).val('');
}
});
$("#b1").blur(function(){
var vv=$(this).val();
if(vv==''){
$(this).val(this.defaultValue);
}

});

});
</script>
<body>
<input type="text" value="username" id="b1"><br>
<input type="password" id="b2" value="123456">
</body>
</html>