很多网站的搜索输入框会显示一个“搜索。。”这样的文本， 当我们移入鼠标之后会被清空让我们输入东西。
这里把实现该功能的代码写成插件形式。代码如下：
(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>
分享到：
相关推荐
**jQuery date_input 日期插件详解** 在网页开发中，日期选择功能是非常常见的，例如在填写表单时的出生日期、预约日期等。jQuery date_input 插件是为了解决这个问题而设计的一个实用工具，它提供了用户友好的界面...
在本主题中，我们将深入探讨"js文本框input验证插件"这一技术，特别是与jQuery相关的验证插件。 首先，理解input验证的重要性是至关关键的。网页表单中，input元素通常用于收集用户数据，如用户名、密码、电子邮件...
本文将深入探讨“input时间日历插件”的相关知识点，包括其设计原理、实现方式、常见功能及应用实例。 首先，我们要理解“input”在HTML中的意义。在HTML中，`<input>`标签用于创建交互式的表单控件，它允许用户...
通过kettle-redis-input-plugin 插件实现kettle 可以查询redis中的数据，详细的使用方法见博客https://blog.csdn.net/ispringmw/article/details/108371012
当用户在input元素中输入文字时，bigautocomplete插件会根据已输入的部分内容，从预定义的数据源中匹配出可能的完整词汇或短语，这些匹配项会实时显示在下拉菜单中供用户选择。 这个插件的工作原理通常包括以下几个...
unity插件inputtouch 多平台 c# JavaScript 文件大小588k
此插件通过查找所有Input框 type="text" 属性 在input 文本框的最后添加一个“X” 插件环境： 基于jQuery + Bootstrap 插件使用： 引用 ClearButton 样式 引用 clearbutton 脚本 注意： 样式应该在Bootstrap的...
通过使用这样的插件，开发者可以定制不同的动画样式，使占位符文本在聚焦、失去焦点或者输入内容时呈现出更加吸引人的变化，从而提升用户界面的友好度。 在实现这个插件时，开发者可能利用JavaScript或者CSS3的过渡...
1. **API接口**：该插件提供了丰富的API接口，使得开发者能够方便地进行动态添加、删除、禁用和启用标签，以及获取和设置标签值等操作。这些接口使得在程序逻辑中控制标签的状态变得灵活易行。 2. **与Typehead.js...
在IT领域，尤其是在前端开发中，"input多标签插件 按回车生成新的标签"是一个常见的功能需求。这个功能通常应用于用户需要输入多个标签，例如在社交媒体、博客平台或者内容管理系统中，用户可以使用此功能快速创建或...
4. 初始化插件：通过jQuery选择器找到目标Input元素，并调用Fancy Input插件，指定想要的动画效果。 例如： ```javascript $(document).ready(function() { $('input').fancyInput({ effect: 'fadeIn' // 选择...
这个功能是现代Web应用的一个常见...前端开发者需要理解`<input type="password">`的特性，以及如何通过JavaScript监听和改变元素的属性。在实际应用中，还可以结合现代前端框架进行优化，提高代码的复用性和可维护性。
1. **SACD ISO镜像播放**：该插件的核心功能是读取和解码SACD ISO镜像文件，使得用户可以直接在Foobar2000中播放这些高解析度的音频内容，无需先将ISO文件提取或转换。 2. **多声道支持**：SACD可以包含多声道音频...
这些插件提供了更丰富的功能，包括自定义颜色选择器的样式、添加预设颜色、以及支持透明度滑块等。 例如，`jQuery.spectrum`插件是一个功能强大的颜色选择器，它不仅支持RGB、HSV、HEX等多种颜色模式，还提供了一个...
本文介绍的内容是关于如何利用jQuery实现HTML5中定义的input元素类型为datalist的下拉列表功能。首先，我们需要了解datalist是什么。Datalist是HTML5中的一个表单元素，它能为输入字段提供一个自动完成的下拉列表。...
描述中进一步补充了该插件适用于foobar2000的多个版本，包括0.9.4.3、1.0以及1.18。这表明foo_input_dts.dll具有一定的兼容性，能够支持这些不同版本的软件，使得用户在播放DTS音频时无需担心版本不匹配的问题。 **...
**jQuery Masked Input 插件详解** 在网页开发中，我们常常需要对用户输入的数据进行格式化，如电话号码、日期、货币等，以保持数据的一致性和规范性。这时，jQuery Masked Input 插件就能派上用场。这个插件允许...
jquery.samask-masker是一款input限制输入格式jQuery插件。该jquery插件可以在用户往输入框输入内容时，限制输入内容的格式，例如电话号码格式，日期格式，货币格式和ip地址格式等等。
这时，jQuery Masked Input Plugin插件就能派上大用场。它是一款轻量级、功能强大的jQuery插件，能够帮助开发者实现对输入框内容的自动格式化，提升用户体验。 ### 插件介绍 jQuery Masked Input Plugin由插件作者...
在IT行业中，jQuery Tag插件是一种常见的前端交互组件，它允许用户在input文本域中输入文字，然后将这些文字转化为可交互的标签形式，提供了一种直观、动态的数据输入方式，尤其适用于创建元数据或者分类标签。...