ie placeholder属性的兼容性问题

原创 2013年12月04日 15:30:45

html 5 有个很棒的属性,placeholder,在鼠标聚焦到上面时候,提示文字会消失,失去焦点之后,又会出现:


但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,为了解决这个问题,因此,人为的去实现placeholder属性:


//placeholder功能实现
var placeholder = {
    add: function (el) {
        if (!('placeholder' in document.createElement('input'))) {
            var self = placeholder;
            el.each(function (e) {
                if (IsEmpty(e.value()) || e.value() == e.attr('placeholder')) {
                    e.value(e.attr('placeholder'));
                    e.css('color', 'gray');
                }
                else {
                    e.css('color', 'black');
                }
            });
            el.bind('focus', self._onfocus);
            el.bind('click', self._onfocus);
            el.bind('blur', self._onblur);
            el.bind('keyup', self._onkeyup);
        }
    },
    remove: function (el) {
        if (!('placeholder' in document.createElement('input'))) {
            var self = placeholder;
            el.unbind('focus', self._onfocus);
            el.unbind('click', self._onfocus);
            el.unbind('blur', self._onblur);
        }
    },
    check: function (el) {
        if (!('placeholder' in document.createElement('input'))) {
            el.each(function (tar) {
                if (IsEmpty(tar.value())) {
                    tar.value(tar.attr('placeholder'));
                }
            });
        }
    },
    clear: function () {
        if (!('placeholder' in document.createElement('input'))) {
            $('input[type="text"]').each(function (el) {
                if (el.value() == el.attr('placeholder')) {
                    el.value('');
                }
            });
            $('textarea').each(function (el) {
                if (el.value() == el.attr('placeholder')) {
                    el.value('');
                }
            });
        }
    },
    _onfocus: function () {
        if ($(this).value() == $(this).attr('placeholder'))
            $(this).value('');
    },
    _onblur: function () {
        if (IsEmpty($(this).value()) || $(this).value() == $(this).attr('placeholder')) {
            $(this).value($(this).attr('placeholder'));
            $(this).css('color', 'gray');
        }
        else {
            $(this).css('color', 'black');
        }
    },
    _onkeyup: function () {
        if (IsEmpty($(this).value())) {
            $(this).css('color', 'gray');
        }
        else {
            $(this).css('color', 'black');
        }
    }
};


使用时候:

    placeholder.add($('input[type="text"]'));
    placeholder.add($('textarea'));



需要注意的是,考虑到如果input的type是password的时候,placeholder显示的是.....的属性

这种情况下,解决方法为:

给定两个输入框,

一个是text,一个为password的,

在有焦点的时候,切换为password,失去焦点的时候,切换为text用来展示placeholder属性.

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
    var pwd = $("#pwd");
    var password = $("#password");
    pwd.focus(function(){
        pwd.hide();
        password.show().focus();
    });
     
    password.focusout(function(){
        if(password.val().trim() === ""){
            password.hide();
            pwd.show();
        }
    });
});
</script>
<input type="text" id="pwd" value="请输入密码"/>

<input type="password" id="password" style="display:none;"/>



相关文章推荐

IE6特有bug兼容性问题整理

  • 2017年11月24日 23:10
  • 73KB
  • 下载

解决placeholder兼容性问题

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。 实例:1 input t...

ie6十大兼容性问题

  • 2012年06月25日 10:48
  • 24KB
  • 下载

input属性placeholder的兼容性问题

点击打开链接 HTML5 Placeholder实现input背景文字提示效果 2 这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在...
  • QTFYING
  • QTFYING
  • 2015年07月04日 15:01
  • 1428

IE和Firefox之间兼容性问题

  • 2012年04月17日 14:35
  • 98KB
  • 下载

浏览器兼容性问题解决方案之CSS——已在IE、FF、Chrome测试

在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法,已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明,现...

如何解决IE兼容性问题

  • 2012年02月13日 17:52
  • 9KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ie placeholder属性的兼容性问题
举报原因:
原因补充:

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