html5的placeholder属性(IE如何兼容placeholder属性)
placeholder属性,IE对其的支持表示无奈,firefox、google chrome表示毫无压力。
HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现:
<input id="t1" type="text" placeholder="请输入文字" />
由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢?(更多HTML5/CSS3特性检测可以访问)
默认提示文字是灰色的,可以通过CSS来改变文字样式:
兼容其他不支持placeholder的浏览器:
介绍一个超强的让IE下支持placeholder的属性插件,代码如下:
$(document).ready(function () {
var doc = document,
inputs = doc.getElementsByTagName('input'),
supportPlaceholder = 'placeholder' in doc.createElement('input'),
placeholder = function (input) {
var text = input.getAttribute('placeholder'),
defaultValue = input.defaultValue;
if (defaultValue == '') {
input.value = text
}
input.onfocus = function () {
if (input.value === text) {
this.value = ''
}
};
input.onblur = function () {
if (input.value === '') {
this.value = text
}
}
};
if (!supportPlaceholder) {
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs[i],
text = input.getAttribute('placeholder');
if (input.type === 'text' && text) {
placeholder(input)
}
}
}
});
直接把代码复制下来,保存成一个js文件引用即可,根本不用再做任何处理,超级方便~
此文源于http://lidrema.blog.163.com/blog/static/209702148201305101844932/
html5的placeholder属性(IE如何兼容placeholder属性)的更多相关文章
- 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)
placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...
- HTML5之placeholder属性以及如何更改placeholder属性中文字颜色
今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...
- 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色
今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...
- 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6
@{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
- IE8兼容placeholder的方案
用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...
- ie上如何兼容placeholder
首先,判断浏览器是否支持placeholder属性: var input = document.createElement('input'); if("placeholder" i ...
- ie兼容placeholder效果
转载:http://www.jb51.net/article/56244.htm placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 ...
- jQuery实现ie浏览器兼容placeholder效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- MariaDB(MySQL)创建、删除、选择及数据类型使用详解
一.MariaDB简介(MySQL简介略过) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行 ...
- Flex布局如何实现最后一个元素右对齐,或者第一个元素左对齐
先来看看一个例子 在一个div我们把四个按钮全部放到右边去了,看下效果↓ 这个时候我们想把第一个按钮左对齐,其他保持不变 这时候我们来个第一个按钮样式上加上 :margin-right: auto; ...
- PS_0001:改变图片颜色 填充颜色
1,创建新图存 ctrl + j 2,点击前景色按钮,改变颜色 3,前景色的键盘快捷键是“Alt+Delete”,背景色的键盘快捷键是“Ctrl+Delete”
- 数据类型(8种)和运算符——Java
一.什么是标识符,它有什么作用(重点掌握) 1. 标识符指的是 标识符是用户编程时使用的名字,用于给变量.常量.函数.语句块等命名,以建立起名称与使用之间的关系.标识符可由任何字母数字字符串形成. 2 ...
- 安卓平台SQLite数据库基础操作总结
最近学了一些安卓开发,在这里分享一下SQLite数据库的使用相关部分,我使用的工具为Android Studio,后台语言为java: 首先,需要创建一个数据库辅助类DataBaseHelper,用于 ...
- win10家庭版更改本地账户名、C盘Users下文件夹名和环境变量等
PS:由于四五年前装系统的时候懵懵懂懂的敲了一个中文用户名(有一个字还打错了,尴尬),导致现在打开cmd默认是C:\Users\中文名,path环境变量中也有中文路径,有时候有些程序的路径也是中文,这 ...
- F.Three pahs on a tree
思路 两次bfs找出树的直径并处理出端点离树上各叶子节点的距离,在直径上找一点的子树叶子p3,使得dis(p1,p2) + dis(p2,p3) + dis(p1,p3)最大 易知上式是路径实长的两倍 ...
- ip连接mysql时报不能连接
问题:springboot项目在用localhost连接mysql时没问题,但当localhost换成ip时出现 该问题:message from server: "Host 'DESKTO ...
- TCP常用拆包处理
1.演示环境为windows 10 1903 2.演示代码 #include "pch.h" #include <iostream> #include <WinS ...
- 文件分配表(FAT)及其结构
原链接:https://blog.csdn.net/qianjintianguo/article/details/712590?utm_source=blogxgwz6 文件分配表(FAT)是文件管理 ...