Jquery简单的placeholder效果

由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考!

先看看效果吧!如下JSFiddle地址

查看效果链接

JS代码如下:

/*
* JS placeholder
* IE6-IE9不支持HTML5中的placeholder
*/ function Placeholder(options) {
this.config = {
defaultColor: '#ccc',
curColor: '#333',
targetElem: '.placeholderCls'
}; this.init(options);
} Placeholder.prototype = { constructor:Placeholder, init: function(options){
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config; $(_config.targetElem).each(function(){
var supportPlaceholder = 'placeholder' in document.createElement('input');
if(!supportPlaceholder) {
var defaultValue = $(this).attr('placeholder');
$(this).focus(function(){
var pattern = new RegExp("^" + defaultValue + "$|^$");
pattern.test($(this).val()) && $(this).val('').css('color',_config.curColor);
}).blur(function(){
if($(this).val() == defaultValue) {
$(this).css('color',_config.defaultColor);
}else if($(this).val().length == 0){
$(this).val(defaultValue).css('color', _config.defaultColor);
}
}).trigger('blur');
}
}); }
};

HTML代码如下:

<form id="form1">
<h3>通过value方式模拟placeholder</h3> <p>
<label for="username1">用户名:</label>
<input type="text" class="placeholderCls" placeholder="请输入用户名">
</p>
<p>
<label for="address1">地 址:</label>
<input type="text" class="placeholderCls" placeholder="请输入地址">
</p>
<p>
<label for="remarks1">备 注:</label>
<textarea placeholder="请输入备注" class="placeholderCls"></textarea>
</p>
</form>

代码初始化:

<script>
new Placeholder({});
</script>

Jquery简单的placeholder效果的更多相关文章

  1. jquery简单的拖动效果

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  2. IE下支持文本框和密码框placeholder效果的JQuery插件

    基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...

  3. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  4. jQuery效果之封装模拟placeholder效果,让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  5. jQuery框架开发一个最简单的幻灯效果

    在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果

  6. jQuery实现ie浏览器兼容placeholder效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  8. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  9. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

随机推荐

  1. CentOS 7 镜像下载

    新版本系统镜像下载(当前最新是CentOS 7.4版本) CentOS官网 官网地址 http://isoredirect.centos.org/centos/7.4.1708/isos/x86_64 ...

  2. github 账号创建

    1.注册 注册地址:   https://github.com/join?source=header-home 2.建立组织 (1)点击头像旁边的"+",选择New organiz ...

  3. 2016年CSDN十大博客之星评选,快来投票哈~

    11-28号开始投票,现在处于公示期.这是我的投票链接 : http://blog.csdn.net/vote/candidate.html?username=qq_25827845 重在参与,各位小 ...

  4. OpenCV多版本管理

    OpenCV在Ubuntu下经常会安装多个版本,比如默认版本,自己安装的,ros安装的等等.有时候需要给程序指定某个OpenCV版本,网上有一些方法,但还是会遇到很多问题. 这里提供一种选择,即指定O ...

  5. Flutter Dart中的异步

    以下内容从官网得到: https://webdev.dartlang.org/articles/performance/event-loop Even-Looper Dart是单线程模型,也就没有了所 ...

  6. Python+Selenium笔记(二):配置谷歌+IE环境

    #有的时候可能要访问外国的网站下载资料或工具,这时可能出现各种问题,例如谷歌人机验证显示不了.网站打不开等,建议使用一个FQ软件 (一)  设置IE (1)   http://docs.seleniu ...

  7. 创建Filter类

    1.Filter可认为是servlet的一种“加强版”,它主要用于对用户请求进行预处理,也可以对HttpServletresponse进行后处理,是个典型的处理链.Filter也可对用户请求生成响应, ...

  8. 【Python】keras卷积神经网络识别mnist

    卷积神经网络的结构我随意设了一个. 结构大概是下面这个样子: 代码如下: import numpy as np from keras.preprocessing import image from k ...

  9. sklearn——数据集调用及应用

    忙了许久,总算是又想起这边还没写完呢. 那今天就写写sklearn库的一部分简单内容吧,包括数据集调用,聚类,轮廓系数等等.   自带数据集API 数据集函数 中文翻译 任务类型 数据规模 load_ ...

  10. Python之生成器(generator)和迭代器(Iterator)

    generator 生成器generator:一边循环一边计算的机制. 生成器是一个特殊的程序,可以被用于控制循环的迭代行为.python中的生成器是迭代器的一种,使用yield返回值函数,每次调用y ...