【JS】IE兼容placeholder

直接上代码:

   $(document).ready(function () {
        var doc = document,
                textareas = doc.getElementsByTagName(‘textarea‘),
                supportPlaceholder = ‘placeholder‘ in doc.createElement(‘textarea‘),

                placeholder = function (textarea) {
                    var text = textarea.getAttribute(‘placeholder‘),
                            defaultValue = textarea.defaultValue;
                    if (defaultValue == ‘‘) {
                        textarea.value = text
                    }
                    textarea.onfocus = function () {
                        if (textarea.value === text) {
                            this.value = ‘‘
                        }
                    };
                    textarea.onblur = function () {
                        if (textarea.value === ‘‘) {
                            this.value = text
                        }
                    }
                };

        if (!supportPlaceholder) {
            for (var i = 0, len = textareas.length; i < len; i++) {
                var textarea = textareas[i],
                        text = textarea.getAttribute(‘placeholder‘);
                if ( text) {
                    placeholder(textarea);
                }
            }
        }
    });

textarea可以换成input

时间: 2024-10-09 14:30:23

【JS】IE兼容placeholder的相关文章

兼容placeholder

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

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

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

让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=

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做了许多增强,比如inp

关于js的兼容问题(小办法)!

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可

IE8兼容placeholder的方案

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

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

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

js 完美兼容浏览器的复制功能

1,js结合swf的复制功能,完美兼容火狐,谷歌,360,ie8,使用示例:(ps:引入copy.swf比较重要,文件传送门 解压密码:http://www.bieanju.com/,为了防止360删除文件请解压后去除后缀的1) function copyText(){        var clip = new ZeroClipboard.Client();         clip.setHandCursor(true);                //var text= documen

关键词导致avalon.js不兼容IE

avalon.js是一款迷你的MVVM框架,设计者将其兼容到了IE6.轻巧的体积和良好的兼容使它非常适合国内的某些项目(学校.政府.银行).然而有时候居然出现了在ie上无法渲染的情况. 例如下列这段简单的demo: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title&g