当前位置:首页 > 开发 > Web前端 > 前端 > 正文

input内容变更以及透明度小插件

发表于: 2014-01-22   作者:alleni123   来源:转载   浏览:
摘要: 很多网站的搜索输入框会显示一个“搜索。。”这样的文本, 当我们移入鼠标之后会被清空让我们输入东西。 这里把实现该功能的代码写成插件形式。代码如下: (function($){ $.fn.myInput=function(opts){ var setting=$.extend({ opacity:0.5, content:"Search..&
很多网站的搜索输入框会显示一个“搜索。。”这样的文本, 当我们移入鼠标之后会被清空让我们输入东西。

这里把实现该功能的代码写成插件形式。代码如下:

(function($){
	
	$.fn.myInput=function(opts){
		var setting=$.extend({
			opacity:0.5,
			content:"Search.."
		},opts||{});
		
		if($(this).val()!=setting.content){
			//alert("input的初始值必须与参数值一致, 参数默认值为'Search..'");
			$(this).val(setting.content);
		}
		
		
		$(this).css("opacity",setting.opacity);
		$(this).focus(function(){
		//	$(this).css("border","none");
			$(this).css("opacity",1);
			if($(this).val()==""||$(this).val()==setting.content){
				$(this).val("");
			}
		});
		
		$(this).focusout(function(){
			if($(this).val()==""){
				$(this).val(setting.content);
				$(this).css("opacity",setting.opacity);
			}
		});
	}
	
	
})(jQuery);




demo.html:
<!DOCTYPE html>
<html>
  <head>
   
	 
    
	<script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-1.9.0.js"></script>
 	<script type="text/javascript" src="jquery.cms.common.js"></script>
 
  </head>
  
  <script type="text/javascript">
	$(function(){
		$("#ip1").myInput();
		$("#ip2").myInput({content:"搜索"});
		$("#ip3").myInput({opacity:"0.1",content:"搜索"});
	})
  </script>
  
  <body>
 	<input type="text" id="ip1" value="Search.."/>
 	<input type="text" id="ip2" value="搜索"/>
 		<input type="text" id="ip3" value=""/>
  </body>
</html>



input内容变更以及透明度小插件

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号