`

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

阅读更多
很多网站的搜索输入框会显示一个“搜索。。”这样的文本, 当我们移入鼠标之后会被清空让我们输入东西。

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

(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>



分享到:
评论

相关推荐

    date_input插件

    **jQuery date_input 日期插件详解** 在网页开发中,日期选择功能是非常常见的,例如在填写表单时的出生日期、预约日期等。jQuery date_input 插件是为了解决这个问题而设计的一个实用工具,它提供了用户友好的界面...

    js文本框input验证插件

    在本主题中,我们将深入探讨"js文本框input验证插件"这一技术,特别是与jQuery相关的验证插件。 首先,理解input验证的重要性是至关关键的。网页表单中,input元素通常用于收集用户数据,如用户名、密码、电子邮件...

    Kettle Redis input 插件

    通过kettle-redis-input-plugin 插件实现kettle 可以查询redis中的数据,详细的使用方法见博客https://blog.csdn.net/ispringmw/article/details/108371012

    input 时间日历插件

    本文将深入探讨“input时间日历插件”的相关知识点,包括其设计原理、实现方式、常见功能及应用实例。 首先,我们要理解“input”在HTML中的意义。在HTML中,`&lt;input&gt;`标签用于创建交互式的表单控件,它允许用户...

    input自动补全js插件 bigautocomplete

    当用户在input元素中输入文字时,bigautocomplete插件会根据已输入的部分内容,从预定义的数据源中匹配出可能的完整词汇或短语,这些匹配项会实时显示在下拉菜单中供用户选择。 这个插件的工作原理通常包括以下几个...

    InputTouch 触摸拖拽常用unity插件

    unity插件inputtouch 多平台 c# JavaScript 文件大小588k

    Input框后面的“X”实现清除文本框插件

    此插件通过查找所有Input框 type="text" 属性 在input 文本框的最后添加一个“X” 插件环境: 基于jQuery + Bootstrap 插件使用: 引用 ClearButton 样式 引用 clearbutton 脚本 注意: 样式应该在Bootstrap的...

    input多标签插件 按回车生成新的标签

    在IT领域,尤其是在前端开发中,"input多标签插件 按回车生成新的标签"是一个常见的功能需求。这个功能通常应用于用户需要输入多个标签,例如在社交媒体、博客平台或者内容管理系统中,用户可以使用此功能快速创建或...

    html5 input placeholder文本占位符动画插件

    通过使用这样的插件,开发者可以定制不同的动画样式,使占位符文本在聚焦、失去焦点或者输入内容时呈现出更加吸引人的变化,从而提升用户界面的友好度。 在实现这个插件时,开发者可能利用JavaScript或者CSS3的过渡...

    Bootstrap tagsinput自定义标签插件

    1. **API接口**:该插件提供了丰富的API接口,使得开发者能够方便地进行动态添加、删除、禁用和启用标签,以及获取和设置标签值等操作。这些接口使得在程序逻辑中控制标签的状态变得灵活易行。 2. **与Typehead.js...

    jquery炫酷Input表单输入文字动画特效插件

    4. 初始化插件:通过jQuery选择器找到目标Input元素,并调用Fancy Input插件,指定想要的动画效果。 例如: ```javascript $(document).ready(function() { $('input').fancyInput({ effect: 'fadeIn' // 选择...

    foo_input_sacd

    1. **SACD ISO镜像播放**:该插件的核心功能是读取和解码SACD ISO镜像文件,使得用户可以直接在Foobar2000中播放这些高解析度的音频内容,无需先将ISO文件提取或转换。 2. **多声道支持**:SACD可以包含多声道音频...

    input输入款点击小眼睛显示或隐藏密码

    这个功能是现代Web应用的一个常见...前端开发者需要理解`&lt;input type="password"&gt;`的特性,以及如何通过JavaScript监听和改变元素的属性。在实际应用中,还可以结合现代前端框架进行优化,提高代码的复用性和可维护性。

    jQuery颜色选取插件 支持透明度选择

    这些插件提供了更丰富的功能,包括自定义颜色选择器的样式、添加预设颜色、以及支持透明度滑块等。 例如,`jQuery.spectrum`插件是一个功能强大的颜色选择器,它不仅支持RGB、HSV、HEX等多种颜色模式,还提供了一个...

    jQuery插件datalist实现很好看的input下拉列表

    本文介绍的内容是关于如何利用jQuery实现HTML5中定义的input元素类型为datalist的下拉列表功能。首先,我们需要了解datalist是什么。Datalist是HTML5中的一个表单元素,它能为输入字段提供一个自动完成的下拉列表。...

    可用于foobar20000版本的DTS解码器插件foo_input_dts.dll

    描述中进一步补充了该插件适用于foobar2000的多个版本,包括0.9.4.3、1.0以及1.18。这表明foo_input_dts.dll具有一定的兼容性,能够支持这些不同版本的软件,使得用户在播放DTS音频时无需担心版本不匹配的问题。 **...

    jquery格式输入插件Masked Input

    **jQuery Masked Input 插件详解** 在网页开发中,我们常常需要对用户输入的数据进行格式化,如电话号码、日期、货币等,以保持数据的一致性和规范性。这时,jQuery Masked Input 插件就能派上用场。这个插件允许...

    input限制输入格式jQuery插件

    jquery.samask-masker是一款input限制输入格式jQuery插件。该jquery插件可以在用户往输入框输入内容时,限制输入内容的格式,例如电话号码格式,日期格式,货币格式和ip地址格式等等。

    jquery maskedinput 插件 Masked Input Plugin

    这时,jQuery Masked Input Plugin插件就能派上大用场。它是一款轻量级、功能强大的jQuery插件,能够帮助开发者实现对输入框内容的自动格式化,提升用户体验。 ### 插件介绍 jQuery Masked Input Plugin由插件作者...

    jquery tag插件input文本域输入文字创建标签文字效果

    在IT行业中,jQuery Tag插件是一种常见的前端交互组件,它允许用户在input文本域中输入文字,然后将这些文字转化为可交互的标签形式,提供了一种直观、动态的数据输入方式,尤其适用于创建元数据或者分类标签。...

Global site tag (gtag.js) - Google Analytics