很多网站的搜索输入框会显示一个“搜索。。”这样的文本， 当我们移入鼠标之后会被清空让我们输入东西。
这里把实现该功能的代码写成插件形式。代码如下：
(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的一个非常实用的日期插件，data_input
js文本框input验证插件,jquery js input 验证 插件
unity插件inputtouch 多平台 c# JavaScript 文件大小588k
通过kettle-redis-input-plugin 插件实现kettle 可以查询redis中的数据，详细的使用方法见博客https://blog.csdn.net/ispringmw/article/details/108371012
input日历插件，可选择日历，以及时间
此插件通过查找所有Input框 type="text" 属性 在input 文本框的最后添加一个“X” 插件环境： 基于jQuery + Bootstrap 插件使用： 引用 ClearButton 样式 引用 clearbutton 脚本 注意： 样式应该在Bootstrap的...
html5 input placeholder文本占位符动画插件
input多标签插件 按回车生成新的标签
Fancy Input是一款效果非常炫酷的Input表单输入文字动画特效jquery插件。它使用CSS3来制作动画特效，共提供了5种输入文字动画特效。
前端登录界面输入密码，input输入款点击小眼睛显示或隐藏密码。
在搜索的过程中，有的程序需要自动补全输入内容，类似联想查询
tagsinput是一款基于Bootstrap的自定义标签插件。该自定义标签插件提供api接口，可以将input和select元素转换为标签。并能和typehead.js插件结合，提供查询提示信息。
jquery.samask-masker是一款input限制输入格式jQuery插件。该jquery插件可以在用户往输入框输入内容时，限制输入内容的格式，例如电话号码格式，日期格式，货币格式和ip地址格式等等。
bootstrap-input-spinner是一款基于bootstrap4和jquery的input输入框数值微调插件。该插件会为输入框添加增加和减少按钮，通过点击相应的按钮，来对输入框中的数值进行微调。
非常全面的google虚拟键盘插件，一键安装并使用，能获取页面上所有的input标签，并自动弹出
实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单： 将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题： input的onblur中隐藏...
主要介绍了微信小程序实现提交input信息到后台的方法,结合实例形式分析了微信小程序提交input信息到后台相关事件响应与数据处理操作技巧,需要的朋友可以参考下
原版的bootstraptagsinput插件，内容太过繁杂，也不知道如何使用。里面好多冗余文件。本压缩保内的所有文件均为必须文件，采用输入框和多选框两种方式。足以应对项目应用，应用非常简单。其中重要的data-role属性，...
本文给大家分享的是使用jQuery实现的房HTML5中的一个好看的input框很好看的下拉列表--datalist，兼容性非常不错，这里推荐给大家，有需要的小伙伴可以参考下。
本文实例讲述了微信小程序实现简单input正则表达式验证功能。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> ...