Css3下input标签的placeholder属性在IE10以下是不兼容的,页面加入这段JS脚本后,能够兼容IE6+

 //@charset "utf-8";
/**
* jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
* 用来处理placeholder的插件
* 兼容IE6浏览器
* @author liuzhao141596@163.com
* @version 1.0
* @date 2014-2-24
*/
$(function($) {
//判断浏览器是否支持 placeholder属性
function isPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
} function changeToOriginalColor(self) {
var index = $(self).index();
var color = originalColor[$(self).index()];
$(self).css('color', color);
} if(!isPlaceholder()) {
var texts = $(':text');
var len = texts.length;
var originalColor = [];
for(var i = ; i < len; i++) {
var self = texts[i];
var placeholder = $(self).attr('placeholder');
if($(self).val() == "" && placeholder != null) {
$(self).val(placeholder);
originalColor[i] = $(self).css('color');
$(self).css('color', '#666');
}
}
texts.focus(function() {
if($(this).attr('placeholder') != null && $(this).val() == $(this).attr('placeholder')) {
$(this).val('');
changeToOriginalColor(this);
}
}).blur(function() {
if($(this).attr('placeholder') != null && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder'));
$(this).css('color', '#666');
}
});
}
});

效果是这样的初始状态

文本框有文字输入

使用方法:

页面引用这段脚本就可以向下兼容placeholder  的属性,不过注意的是密码框的情况不适合!!

Html5/Css3 向下兼容placeholder的更多相关文章

  1. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  2. HTML5&CSS3经典动态表格

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

  3. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  4. HTML5+CSS3整体回顾

    http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...

  5. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

  6. 2019.4.25 表格表单与HTML5 && CSS3

    目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...

  7. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  8. 很实用的HTML5+CSS3注册登录窗体切换效果

    1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...

  9. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

随机推荐

  1. MD中bitmap源代码分析--SYNC IO和RAID5的补充

    最近在做bwraid的R6的设计工作,需要调研一下bitmap下刷磁盘的IO属性(是否为SYNC IO),还有raid5中bitmap的存储和工作方式. 1.bitmap刷磁盘是否为 SYNC IO? ...

  2. 2016年如何选择 Linux 发行版

    不管是在企业级应用还是在消费者领域,2015 对于 Linux 来说都是极其重要的一年.作为一个从 2005 年就开始使用 Linux 的老用户,我有幸见证了 Linux 过去这 10 年里的重大发展 ...

  3. Shell中特殊的变量

    $表示当前的进程,当使用echo $$是会输出当前shell的pid echo $$ 特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例 ...

  4. Java 实现Md5算法

    package other; import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;/* * ...

  5. 手势触摸定位(UIPanGestureRecognizer)

    /** 1.相对于父坐标系而言,表示当前触摸点所在的位置 */ CGPoint locationPoint = [panGestureRecognizer locationInView:panGest ...

  6. Android Sensor Test

    魅蓝note可用 [{Sensor name="MPL Gyroscope", vendor="Invensense", version=1, type=4, ...

  7. 最全SpringMVC具体演示样例实战教程

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先.导入SpringMVC须要的jar包. 2.加入Web.xml配置文件里关于SpringMVC的配置 <!--conf ...

  8. mybatis分页插件以及懒加载

    1.   延迟加载 延迟加载的意义在于,虽然是关联查询,但不是及时将关联的数据查询出来,而且在需要的时候进行查询. 开启延迟加载: <setting name="lazyLoading ...

  9. php设计模式——单例模式

    单例模式概念 单例模式是指整个应用中类只有一个对象实例的设计模式. 单例模式的特点 一个类在整个应用中只有一个实例 类必须自行创建这个实例 必须自行向整个系统提供这个实例 php中使用单例模式的原因 ...

  10. MVC第一节 配置

    1.View中的页面设置为起始页后导致404找不到文件. 解决方案:右键属性,把特定页置为空. 2.新建的MVC项目会把系统默认的浏览器作为浏览方式,如果想要改变的话.可以在项目中新建一个webFor ...