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

最新推荐文章于 2024-06-21 16:11:55 发布

linhuiDragon

最新推荐文章于 2024-06-21 16:11:55 发布

阅读量341

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/linhuiDragon/article/details/84520946

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

[color=indigo][size=x-large]input失去焦点和获得焦点jquery焦点事件[/size][/color]

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

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

linhuiDragon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input失去焦点和获得焦点jquery焦点事件

[color=indigo][size=x-large]input失去焦点和获得焦点jquery焦点事件[/size][/color]input失去焦点和获得焦点jquery焦点事件插件，[b][color=red]鼠标在搜索框中点击的时候里面的文字就消失了。[/color][/b]我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件，因为懒，每次都去写非常的烦，于是就...
复制链接

扫一扫

专栏目录