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>
原文地址:http://www.mkyong.com/jquery/jquery-watermark-effect-on-text-input/
JQuery文本框水印插件的简单实现的更多相关文章
- 分享一个仅0.7KB的jQuery文本框输入提示插件
由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- TextBox 文本框水印文字
#region TextBox 文本框水印文字 /// <summary> /// 基于.NET 2.0的TextBox工具类 /// </summary> public st ...
- Jquery文本框值改变事件兼容性
Jquery文本框值改变事件(支持火狐.ie) Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...
- jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]
/** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...
- jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
- jQuery 文本框得失焦点应用
一.文本框得失焦点一种是改变文本框的样式 得到焦点: 失去焦点: 二.文本框得失焦点另一种是改变文本框的值 得到焦点: 失去焦点: 三.jQ ...
- jQuery, 文本框获得焦点后, placeholder提示文字消失
文本框获得焦点后, 提示文字消失, 基于jQuery, 兼容性: html5 //所有文本框获得焦点后, 提示文字消失 $('body').on('focus', 'input[placeholder ...
- jquery 文本框聚焦文字删除
做作业需要,自己写了一个,写的很烂. $(function() { $("#search_input").addClass("before_focus");/* ...
随机推荐
- MySQL CMake参数说明手册
MySQL自5.5版本以后,就开始使用CMake编译工具了,因此,你在安装源文件中找不到configure文件是正常的.很多人下到了新版的MySQL,因为找不到configure文件,不知道该怎么继续 ...
- 如何在A用户下建立视图,这个视图是A的表与B的表进行关联的?
这个前提条件是,同一个数据库,不同用户!!!如果是不同数据库,就要用dblink了 一开始,我直接创建视图,但是提示“权限不足”: 于是我是用A登陆,直接用select * from B.sa_tas ...
- vertical-align 属性设置元素的垂直对齐方式。
值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...
- 双机相关知识(原理、LVM、Raid技术)
1 双机知识 1.1 预备知识 1.1.1 基本概念 双机热备:双机热备双机管理软件可以根据心跳自动检测环境运行情况,如果发现一个节点挂掉了,会自动切换到另外一个 ...
- [2015hdu多校联赛补题]hdu5302 Connect the Graph
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5302 题意:给你一个无向图,它的边要么是黑色要么是白色,且图上的每个点最多与两个黑边两个白边相连.现在 ...
- Codeforces 714C. Sonya and Queries Tire树
C. Sonya and Queries time limit per test:1 second memory limit per test: 256 megabytes input:standar ...
- asp.net MVC 源码分析
先上一张图吧 asp.net请求机制的图 by传智播客邹华栋老师 然后是 邹老师添加MVC请求过程的图 其实MVC 是在.netframework上加了一个过滤器 HttpModule 在C:\W ...
- RecycleView在eclipse的初体验
在sdk中找到v7包 \sdk\extras\android\support\v7\recyclerview 导入工程 Import\Android\Existing Android Code Int ...
- three.js 之旅一
扯一段废话,当你遇到一个没人知道的问题时,你该怎么办? 问周围人,他们遇到这种情况怎么办.作为程序员,这种情况肯定时有发生,我们要学会寻找资源. Three.js的六个基本步骤 1.设 ...
- homework 11 2016 5 13 读入文件做输入
#include <iostream>#include <fstream> using namespace std; int main(){ string x, y, z; c ...