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>

ie浏览器下placeholder属性显示不出来的两种解决方式

文本框input, type为text,或者password,有一个属性placeholder,在firefox浏览器下当输入的时候,占位符就会消失这个属性非常好用,然而在IE下,就没有这效果,现在提...
  • chenwei7878
  • chenwei7878
  • 2015年06月25日 23:43
  • 5970

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

placeholder在ie9中不兼容问题解决办法 1、html页面主要内容 2、引入jquery文件 3、主要的js内容 (function($) { ...
  • I_am_listen
  • I_am_listen
  • 2017年07月26日 10:55
  • 821

让IE支持placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息 该提示会在输入字段为空时显示,并会在字段获得焦点时消失。 但placeholder不支持IE10以下版本 在页面中只需引入plac...
  • itmyhome
  • itmyhome
  • 2016年01月01日 22:27
  • 2283

IE不兼容placeholder的解决方案

IE789的input输入框不支持placeholder,方案如下: 1. 如果没有password:  2. 如果有password: /** * @author hyyu 2016.1...
  • yu670538949
  • yu670538949
  • 2016年12月19日 19:56
  • 984

兼容其他不支持placeholder的浏览器(超强的让IE下支持placeholder的属性插件)

html5为元素添加了新属性placeholder。 这是一个很常用的功能:把提示放在输入框里;onfocus时提示消息;onblur时如果已有值,则不再提示,如果没值,保留提示。 QWrap的V...
  • dayu9216
  • dayu9216
  • 2017年04月14日 15:08
  • 575

在IE9中实现placeholder功能

placeholder是文本框用来提示内容的属性,比如:会显示为: 然而IE9不支持此属性,可以使用js来简单模拟placeholder行为。我的基本思路是为输入框设置value值,并设置字体颜...
  • u014291497
  • u014291497
  • 2016年05月07日 21:11
  • 7498

用JavaScript解决Placeholder的IE8兼容问题

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

placeholder兼容浏览器的解决方案

关于placeholder的使用,众所周知它是h5的新属性,所以IE9以下就别想用它了,不支持。 那么我们必须要低版本的浏览器,做一些降级处理的兼容,原理自然就是:提示语placeholder用其他方...
  • xw505501936
  • xw505501936
  • 2016年10月14日 14:57
  • 5751

placeholder在不同浏览器下的表现及兼容方法

1、什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入...
  • xiebaochun
  • xiebaochun
  • 2014年04月15日 17:01
  • 3818

html5 Placeholder属性兼容IE6、7方法

使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现zhihu的解决方法不错,特记录下 w...
  • yingzia1986
  • yingzia1986
  • 2013年09月16日 16:57
  • 1943
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:placeholder IE失效问题
举报原因:
原因补充:

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