Html5/Css3 向下兼容placeholder
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的更多相关文章
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5+CSS3静态页面项目-PayPaul的总结
学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...
- 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的一些 ...
- 精美的HTML5/CSS3表单 带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...
- 2019.4.25 表格表单与HTML5 && CSS3
目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- 很实用的HTML5+CSS3注册登录窗体切换效果
1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
随机推荐
- MD中bitmap源代码分析--SYNC IO和RAID5的补充
最近在做bwraid的R6的设计工作,需要调研一下bitmap下刷磁盘的IO属性(是否为SYNC IO),还有raid5中bitmap的存储和工作方式. 1.bitmap刷磁盘是否为 SYNC IO? ...
- 2016年如何选择 Linux 发行版
不管是在企业级应用还是在消费者领域,2015 对于 Linux 来说都是极其重要的一年.作为一个从 2005 年就开始使用 Linux 的老用户,我有幸见证了 Linux 过去这 10 年里的重大发展 ...
- Shell中特殊的变量
$表示当前的进程,当使用echo $$是会输出当前shell的pid echo $$ 特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例 ...
- Java 实现Md5算法
package other; import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;/* * ...
- 手势触摸定位(UIPanGestureRecognizer)
/** 1.相对于父坐标系而言,表示当前触摸点所在的位置 */ CGPoint locationPoint = [panGestureRecognizer locationInView:panGest ...
- Android Sensor Test
魅蓝note可用 [{Sensor name="MPL Gyroscope", vendor="Invensense", version=1, type=4, ...
- 最全SpringMVC具体演示样例实战教程
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先.导入SpringMVC须要的jar包. 2.加入Web.xml配置文件里关于SpringMVC的配置 <!--conf ...
- mybatis分页插件以及懒加载
1. 延迟加载 延迟加载的意义在于,虽然是关联查询,但不是及时将关联的数据查询出来,而且在需要的时候进行查询. 开启延迟加载: <setting name="lazyLoading ...
- php设计模式——单例模式
单例模式概念 单例模式是指整个应用中类只有一个对象实例的设计模式. 单例模式的特点 一个类在整个应用中只有一个实例 类必须自行创建这个实例 必须自行向整个系统提供这个实例 php中使用单例模式的原因 ...
- MVC第一节 配置
1.View中的页面设置为起始页后导致404找不到文件. 解决方案:右键属性,把特定页置为空. 2.新建的MVC项目会把系统默认的浏览器作为浏览方式,如果想要改变的话.可以在项目中新建一个webFor ...