HTML5 新属性placeholder 兼容ie

啥都不说了,直接上代码

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script type="text/javascript" src="por.js"></script>
 7 </head>
 8 <body>
 9 <div style="padding-top:20px;">
10     <input   placeholder="请输入你的姓名"  type="text" />
11 </div>
15 </body>
16 </html>

por.js

//placeholder IE8
var _placeholderSupport = function() {
    var t = document.createElement("input");
    t.type = "text";
    return (typeof t.placeholder !== "undefined");
}();
window.onload = function() {
    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var curInput = arrInputs[i];
        if (!curInput.type || curInput.type == "" || curInput.type == "text")
            HandlePlaceholder(curInput);
    }
};
function HandlePlaceholder(oTextbox) {
    if (!_placeholderSupport) {
        var curPlaceholder = oTextbox.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0) {
            oTextbox.value = curPlaceholder;
            oTextbox.setAttribute("old_color", oTextbox.style.color);
            oTextbox.style.color = "#c0c0c0";
            oTextbox.onfocus = function() {
                this.style.color = this.getAttribute("old_color");
                if (this.value === curPlaceholder)
                    this.value = "";
            };
            oTextbox.onblur = function() {
                if (this.value === "") {
                    this.style.color = "#c0c0c0";
                    this.value = curPlaceholder;
                }
            }
        }
    }
}

不适合密码框  - -

原文地址:http://www.cnblogs.com/jiaweniv/p/4918055.html

时间: 2024-10-12 09:33:23

HTML5 新属性placeholder 兼容ie的相关文章

(二)给IE6-IE9中的input添加HTML5新属性-placeholder

同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在这里记录分享下. 用法很简单,在代码中引入placeholder.js,并加入后面的一段代码就行了. 1 <script src="jquery-1.11.3.js"></script> 2 <!--IE8-IE6支持html5 placeholder新属性

判断浏览器是否支持某些新属性---placeholder兼容问题解决

function is_true(){ return 'placeholder' in document.createElement('input'); } 实例:placeholder在低版本IE浏览器下兼容性解决 <script type="text/javascript"> if( !('placeholder' in document.createElement('input'))){ $('input[placeholder],textarea[placehold

HTML笔记(2)——HTML5新属性

HTML5 DAY01: 基本内容 HTML5目前最新的规范(标准)是2014年10月推出 2005年左右出现HTML5版本(非标准) W3C组织(两个组织定义H5规范) 学习(研究)HTML5是学习未来(将来主流) HTML版本 - 第一阶段主要学习还是4版本(包含5版本) <header><nav> HTML5版本之后,声明不再出现版本信息 有意地版本,以后可能不再会有新版本 HTML5的规范内容实时更新 注意 HTML5永远都不可能离开javascript. HTML5在移动

html5新属性

一 快速生成doctype html:xt <tab>过度版本 html:4s <tab>严格版本 不同的Doctype 语法是不同的,虽然浏览器解析的结果一致二 常见的语义标签 <p></p> <a href=""></a> <img src=""> 非语义标签 <span></span> <div></div>三 新语义标签 <

HTML5新属性在Google浏览器中不能显示的问题

这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5画布</title> 6 </head> 7 8 <body> 9 <!--定义一块画布--> 10 <

解决html5新标签 placeholder 低版本浏览器下不兼容问题

placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 实例:1 <input type="text" name="userName" placeholder="请输入用户名"> placeholder操作起来非常方便,提高了开发效率,同时在高版本浏览器中用户体验也很好,所以本人很喜欢用这个属性. 然而,在IE9以下版本浏

HTML5 新模块元素兼容问题

新增块元素默认样式 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式.为解决该问题,给下列元素添加“block”显示属性. 代码: article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } 特殊新增块元素 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式,考虑到其特殊性,特为下列元素添加

HTML5新属性之required

实例 带有必填字段的表单: <form action="demo_form.asp" method="get"> Name: <input type="text" name="usr_name" required="required" /> <input type="submit" /> </form> 亲自试一试 定义和用法 requir

HTML5新属性-----拖放

最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文本.在IE4中,唯一有效的放置目标是文本框,到了IE5拖放功能得到扩展,添加了新的事件,而且网页中任何元素都可以作为放置目标,IE5.5更进一步,让网页中的任何元素都可以拖放,IE,Firfox3.5,Safari3+,Chrome都实现了原生拖放功能. 一.可拖放属性draggable 默认情况下