html5的placeholder属性(IE如何兼容placeholder属性)

2013-01-05 10:26:06|  分类: web学习 |  标签:html  js  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属性)的更多相关文章

  1. 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  2. HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  3. 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  4. 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6

    @{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...

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

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

  6. IE8兼容placeholder的方案

    用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...

  7. ie上如何兼容placeholder

    首先,判断浏览器是否支持placeholder属性: var input = document.createElement('input'); if("placeholder" i ...

  8. ie兼容placeholder效果

    转载:http://www.jb51.net/article/56244.htm placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 ...

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

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

随机推荐

  1. MariaDB(MySQL)创建、删除、选择及数据类型使用详解

    一.MariaDB简介(MySQL简介略过) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行 ...

  2. Flex布局如何实现最后一个元素右对齐,或者第一个元素左对齐

    先来看看一个例子 在一个div我们把四个按钮全部放到右边去了,看下效果↓ 这个时候我们想把第一个按钮左对齐,其他保持不变 这时候我们来个第一个按钮样式上加上 :margin-right: auto; ...

  3. PS_0001:改变图片颜色 填充颜色

    1,创建新图存  ctrl + j 2,点击前景色按钮,改变颜色 3,前景色的键盘快捷键是“Alt+Delete”,背景色的键盘快捷键是“Ctrl+Delete”

  4. 数据类型(8种)和运算符——Java

    一.什么是标识符,它有什么作用(重点掌握) 1. 标识符指的是 标识符是用户编程时使用的名字,用于给变量.常量.函数.语句块等命名,以建立起名称与使用之间的关系.标识符可由任何字母数字字符串形成. 2 ...

  5. 安卓平台SQLite数据库基础操作总结

    最近学了一些安卓开发,在这里分享一下SQLite数据库的使用相关部分,我使用的工具为Android Studio,后台语言为java: 首先,需要创建一个数据库辅助类DataBaseHelper,用于 ...

  6. win10家庭版更改本地账户名、C盘Users下文件夹名和环境变量等

    PS:由于四五年前装系统的时候懵懵懂懂的敲了一个中文用户名(有一个字还打错了,尴尬),导致现在打开cmd默认是C:\Users\中文名,path环境变量中也有中文路径,有时候有些程序的路径也是中文,这 ...

  7. F.Three pahs on a tree

    思路 两次bfs找出树的直径并处理出端点离树上各叶子节点的距离,在直径上找一点的子树叶子p3,使得dis(p1,p2) + dis(p2,p3) + dis(p1,p3)最大 易知上式是路径实长的两倍 ...

  8. ip连接mysql时报不能连接

    问题:springboot项目在用localhost连接mysql时没问题,但当localhost换成ip时出现 该问题:message from server: "Host 'DESKTO ...

  9. TCP常用拆包处理

    1.演示环境为windows 10 1903 2.演示代码 #include "pch.h" #include <iostream> #include <WinS ...

  10. 文件分配表(FAT)及其结构

    原链接:https://blog.csdn.net/qianjintianguo/article/details/712590?utm_source=blogxgwz6 文件分配表(FAT)是文件管理 ...