`
linhui_dragon
  • 浏览: 149022 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

input失去焦点和获得焦点jquery焦点事件

阅读更多
input失去焦点和获得焦点jquery焦点事件

input失去焦点和获得焦点jquery焦点事件插件，
鼠标在搜索框中点击的时候里面的文字就消失了。

我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件，因为懒，每次都去写非常的烦，于是就一劳永逸，遇到类似情况就来调用一下就OK 了

相关js代码: 
<title>input失去焦点和获得焦点jquery焦点事件插件 - 懒人建站</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//focusblur
    jQuery.focusblur = function(focusid) {
var focusblurid = $(focusid);
var defval = focusblurid.val();
        focusblurid.focus(function(){
var thisval = $(this).val();
if(thisval==defval){
                $(this).val("");
            }
        });
        focusblurid.blur(function(){
var thisval = $(this).val();
if(thisval==""){
                $(this).val(defval);
            }
        });
        
    };
/*下面是调用方法*/
    $.focusblur("#searchkey");
});
</script>
</head>


第一种：
function addListener(element,e,fn){
	   if(element.addEventListener){
	  	 element.addEventListener(e,fn,false);
	   } else {
	  	 element.attachEvent("on" + e,fn);
	   }
	}
	
	var values = document.getElementById("searchkey");
	
	addListener(values,"click",function(){
		values.value = "";
	})
	
	addListener(values,"blur",function(){
 		if (values.value ==''){
 			values.value = "请输入用户名";
		}
	}) 

第二种：（有bug，输入名称后，鼠标离开，会显示“请输入用户名”）
//获得焦点
	function on_focus(){
		var val = document.getElementById("searchkey");
		if (val.value = "请输入用户名"){
			val.value = "";
		}else {
			val.value = val.value;
		}
	}
	//失去焦点
	function on_blur(){
		var val = document.getElementById("searchkey");
			val.value = "请输入用户名";
	}


<body>
<form action="" method="post">
  <!--  <input id="searchkey" class="search" type="search" name="s" value="请输入用户名" onBlur="on_blur();" onFocus="on_focus();" />-->
    <input id="searchkey" class="search" type="search" name="s" value="请输入用户名" />
</form>

</body>
</html>
分享到：
| html5 在IE6/IE7/IE8中使用html5标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics