简单实现的JQuery文本框水印插件


Posted in Javascript onJune 14, 2016

采用JQuery实现文本框的水印效果非常容易,效果如下:

 简单实现的JQuery文本框水印插件

代码片段,定义要应用水印效果的文本框的样式: .watermark { color: #cccccc; }

将JavaScript代码封装成JQuery的插件: 

(function ($) {
 $.fn.watermark = function (options) {
  var settings = $.extend({
   watermarkText: "Input something here",
   className: "watermark"
  }, options);

  return this.each(function () {

 if ($(this).val().length == 0 || $(this).val() == settings.watermarkText) {
   
//init, set watermark text and class
   
$(this).val(settings.watermarkText).addClass(settings.className);


 }

   //if blur and no value inside, set watermark text and class again.
   $(this).blur(function () {
    if ($(this).val().length == 0) {
     $(this).val(settings.watermarkText).addClass(settings.className);
    }
   });

   //if focus and text is watermrk, set it to empty and remove the watermark class
   $(this).focus(function () {
    if ($(this).val() == settings.watermarkText) {
     $(this).val('').removeClass(settings.className);
    }
   });
  });  
 }
})(jQuery);

接下来直接在页面上使用: 

<div class="search_box">
 <input id="tb_search" type="text" />
</div>

<script type="text/javascript">
 $(document).ready(function () {
  $("#tb_search").watermark({
   watermarkText: "站内检索",
   className: "watermark",
  });
 });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 #Javascript
浅析jQuery 3.0中的Data
Jun 14 #Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 #Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 #Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 #Javascript
jQuery实现手机自定义弹出输入框
Jun 13 #Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 #Javascript
You might like
如何开始收听短波广播
2021/03/01 无线电
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python 实现一个计时器
2020/07/28 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
英语系本科生求职信范文
2013/12/18 职场文书
出售房屋协议书范本
2014/10/06 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
出租车拒载检讨书
2015/01/28 职场文书
单位车辆管理制度
2015/08/05 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android