简单实现的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动态创建html元素的常用方法汇总
Sep 05 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
详解JS函数防抖
Jun 05 Javascript
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
珊瑚虫IP库浅析
2007/02/15 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Python入门篇之列表和元组
2014/10/17 Python
Python函数式编程
2017/07/20 Python
Python中一行和多行import模块问题
2018/04/01 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python批量爬取下载抖音视频
2019/06/17 Python
python def 定义函数,调用函数方式
2020/06/02 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
某公司.Net方向面试题
2014/04/24 面试题
实习教师自我鉴定
2013/12/12 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP