当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,
  前篇介绍过Logstash的使用,本篇继续深入,介绍下最常用的input插件——file。   这个插件可
Redis插件参数配置详解 最小化配置 input { redis { data_type => "list" #logstash redis插件工
搜狗搜索框代码 <script>function verifyquery(form){if(form.sogou_drop.value==2){form.ins
插件名称:myDrag 功能:对某个块级元素进行拖拽 兼容性:ie7或ie7以上,主流浏览器 关键代码:在鼠
1、天气预报插件 效果图: 源代码: <iframe width="650" scrolling="no" height="60" framebord
    我们在前面的文章中提到了两中实现晚绑定的方式,那么在用的时候是否发现有什么不同呢?  
1:前言   业务需求,需要【添加文章】的功能,而在此功能中需要【添加标签】功能的实现,之前看
CSS对IE使用背景透明 实现 rgba 效果 height:35px; background: -webkit-gradient(linear,left top,
使用IDEA Intellij已有两年,在此罗列一下在实践中觉得能有效提升开发效率的一些小技巧和插件。 1.
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号