placeholder IE失效问题

原创 2013年12月04日 14:10:19
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    //第一种方法
    $(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) } 
            } 
        } 
    });

    //第二种方法

    $(function () {
        if (!placeholderSupport()) {   // 判断浏览器是否支持 placeholder
            $('[placeholder]').focus(function () {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                    input.removeClass('placeholder');
                }
            }).blur(function () {
                var input = $(this);
                if (input.val() == '' || input.val() == input.attr('placeholder')) {
                    input.addClass('placeholder');
                    input.val(input.attr('placeholder'));
                }
            }).blur();
        };
    })
    function placeholderSupport() {
        return 'placeholder' in document.createElement('input');
    }
</script>
</head>

<body>
<form>
  <label for="name">用户名:</label>
  <input type="text" placeholder="请输入用户名"/>
</form>
</body>
</html>

相关文章推荐

使用jQuery解决IE9以下无法支持input的placeholder的问题

placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支...
  • cddcj
  • cddcj
  • 2016年09月08日 16:54
  • 1268

ie placeholder属性的兼容性问题

html 5 有个很棒的属性,placeholder,在鼠标聚焦到上面时候,提示文字会消失,失去焦点之后,又会出现: 但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,...

用JavaScript解决Placeholder的IE8兼容问题

if( !('placeholder' in document.createElement('input')) ){           $('input[placeholder],textarea[...
  • wen_t
  • wen_t
  • 2016年02月26日 13:11
  • 2564

placeholder 问题考虑密码输入框 ie兼容问题办法

placeholder在ie9中不兼容问题解决办法 1、html页面主要内容 2、引入jquery文件 3、主要的js内容 (function($) { ...

【CSS】 IE6 ,7下a链接失效的问题及解决方案

问题描述: web应用中,经常需要在图片上添加相应的链接,而且相对于传统的文字链接的方式,不仅美观,而且有更大的可点击区域。例如,京东网图书页面的一个简单布局: 这种情况是几乎没有任何问题...

ie7下z-index失效问题解决方法(详细分析)

绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上...

IE9中X-UA-Compatible失效的问题与值: 对象为 null 或未定义

好端端的W3C标准页面被硬生生渲染成IE5,惨不忍睹。而在F12工具中强制调成IE9标准渲染模式,全部正常。于是研究了一下问题在哪。 关于X-UA-Compatible和IE的Quirks Mo...

bootstrap在ie 6 7 8失效问题

bootstrap
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:placeholder IE失效问题
举报原因:
原因补充:

(最多只允许输入30个字)