JQuery文本框水印插件的简单实现
2024-09-23 18:36:15
采用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/
最新文章
- 安装Visual Studio 2013 出现0x80070643错误
- php课程---文件操作及文件上传的代码总结
- my first article
- 64位系统上使用PLSQL Dervloper解决方案
- Android 应用按两下返回键退出应用程序
- [Angular2 Form] Build Select Dropdowns for Angular 2 Forms
- sphinx-2.2.10-1.rhel6.x86_64 rpm包安装的位置
- JSF 2.0 hello world example
- Collections你用对了吗?
- C#文件流写入方法
- A*算法进入
- [编织消息框架][JAVA核心技术]jdk动态代理
- js基础查漏补缺(更新)
- 基于tomcat+springMVC搭建基本的前后台交互系统
- SaltStack说明文档
- 漫谈hashcode
- lua中 table 重构index/pairs元方法优化table内存占用
- 10.2-uC/OS-III内部任务管理(任务状态)
- IIS无法启动,应用程序池自动关闭
- xsl 文件如何定义 Javascript 函数并且调用
热门文章
- C/C++关键字 extern
- 深入理解js——一切都是对象
- Spring 定时执行任务
- [转载] 3. JebAPI 之 jeb.api.ast
- 决策树算法(1)含java源代码
- flex 正则 验证
- cookie 的“Value”=“xxxxx,xxxxx”部分无效
- Tomcat Xms Xmx PermSize MaxPermSize 区别 及 java.lang.OutOfMemoryError: PermGen space 解决
- jquery load 加载改造,只加载body
- UVAlive3486_Cells