采用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>

  原文地址:http://www.mkyong.com/jquery/jquery-watermark-effect-on-text-input/

JQuery文本框水印插件的简单实现的更多相关文章

  1. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  2. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. TextBox 文本框水印文字

    #region TextBox 文本框水印文字 /// <summary> /// 基于.NET 2.0的TextBox工具类 /// </summary> public st ...

  4. Jquery文本框值改变事件兼容性

    Jquery文本框值改变事件(支持火狐.ie)   Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...

  5. jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]

    /** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...

  6. jQuery文本框(input textare)事件绑定方法教程

    jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...

  7. jQuery 文本框得失焦点应用

    一.文本框得失焦点一种是改变文本框的样式    得到焦点:               失去焦点: 二.文本框得失焦点另一种是改变文本框的值    得到焦点:     失去焦点:       三.jQ ...

  8. jQuery, 文本框获得焦点后, placeholder提示文字消失

    文本框获得焦点后, 提示文字消失, 基于jQuery, 兼容性: html5 //所有文本框获得焦点后, 提示文字消失 $('body').on('focus', 'input[placeholder ...

  9. jquery 文本框聚焦文字删除

    做作业需要,自己写了一个,写的很烂. $(function() { $("#search_input").addClass("before_focus");/* ...

随机推荐

  1. MySQL CMake参数说明手册

    MySQL自5.5版本以后,就开始使用CMake编译工具了,因此,你在安装源文件中找不到configure文件是正常的.很多人下到了新版的MySQL,因为找不到configure文件,不知道该怎么继续 ...

  2. 如何在A用户下建立视图,这个视图是A的表与B的表进行关联的?

    这个前提条件是,同一个数据库,不同用户!!!如果是不同数据库,就要用dblink了 一开始,我直接创建视图,但是提示“权限不足”: 于是我是用A登陆,直接用select * from B.sa_tas ...

  3. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  4. 双机相关知识(原理、LVM、Raid技术)

    1        双机知识 1.1         预备知识 1.1.1     基本概念 双机热备:双机热备双机管理软件可以根据心跳自动检测环境运行情况,如果发现一个节点挂掉了,会自动切换到另外一个 ...

  5. [2015hdu多校联赛补题]hdu5302 Connect the Graph

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5302 题意:给你一个无向图,它的边要么是黑色要么是白色,且图上的每个点最多与两个黑边两个白边相连.现在 ...

  6. Codeforces 714C. Sonya and Queries Tire树

    C. Sonya and Queries time limit per test:1 second memory limit per test: 256 megabytes input:standar ...

  7. asp.net MVC 源码分析

    先上一张图吧 asp.net请求机制的图  by传智播客邹华栋老师 然后是 邹老师添加MVC请求过程的图 其实MVC 是在.netframework上加了一个过滤器  HttpModule 在C:\W ...

  8. RecycleView在eclipse的初体验

    在sdk中找到v7包 \sdk\extras\android\support\v7\recyclerview 导入工程 Import\Android\Existing Android Code Int ...

  9. three.js 之旅一

    扯一段废话,当你遇到一个没人知道的问题时,你该怎么办?         问周围人,他们遇到这种情况怎么办.作为程序员,这种情况肯定时有发生,我们要学会寻找资源. Three.js的六个基本步骤 1.设 ...

  10. homework 11 2016 5 13 读入文件做输入

    #include <iostream>#include <fstream> using namespace std; int main(){ string x, y, z; c ...