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

界面UI推荐

jquery html5 实现placeholder兼容password  IE6

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属性)

时间: 2024-11-02 23:37:25

html5的placeholder属性(IE如何兼容placeholder属性)的相关文章

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

placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.以前要实现这效果都是用JavaScript来控制才能实现: <input id="t1" 

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

今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari.IE) 适用范围:placeholder 属性适用于下面的

html5 placeholder ie10以下不兼容

/*html5 placeholder ie10以下不兼容 加上这个jquery代码可以解决兼容*/ $(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.remov

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

@{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <!--[if (lt IE 8.0)]><link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/login/css/index.src_datauri.css

IE8兼容placeholder的方案

用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失,placeholder可作为输入框的提示文案 如图: placeholder是常用的属性,它使得input框内有很友好的提示效果.高版本浏览器都支持placeholder属性,但IE9以下版本的浏览器并不支持这一属性.这里用JavaScript实现添加对浏览器

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

placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于以下类型的 input 标签:text, search, url, telephone, email 以及 password. 我们先看下在谷歌浏览器中的效果,如图所示: 获得焦点时: 输入字段: 因为是 html5 属性,自然低版本的浏览器比如 ie6-8 不兼容.下面就介绍下如何在低版本浏览器中

兼容placeholder

众所周知.IE9以下不兼容placeholder属性,因此自己定义了一个jQuery插件placeHolder.js.以下为placeHolder.js的代码: /** * 该控件兼容IE9下面,专门针对IE9下面不支持placeholder属性所做 * Author: quranjie * Date:2014-09-26 */ $(function() { // 假设不支持placeholder,用jQuery来完毕 if(!isSupportPlaceholder()) { // 遍历全部i

ie上如何兼容placeholder

首先,判断浏览器是否支持placeholder属性: var input = document.createElement('input'); if("placeholder" in input){ alert('支持'); }else{ alert('不支持'); } (1)如果只需要让不支持placeholder的浏览器能够支持改功能,并不要求支持原生placeholder的浏览器表现一致,那么可以采用如下方法: Placeholder在不支持html5的低版本的浏览器中,plac

让ie也兼容placeholder

<!doctype html><html><head><meta charset="utf-8"><title>让ie也兼容placeholder</title><style>    input::-moz-placeholder{ color:#00f;}    ::-webkit-input-placeholder{ color:#00f;}</style><script src=