placeholder IE失效问题

输入字段未提供具体内容，无法生成标题。

最新推荐文章于 2022-03-01 16:25:01 发布

原创最新推荐文章于 2022-03-01 16:25:01 发布 · 791 阅读

0 ·

CC 4.0 BY-SA版权

asp.net 专栏收录该内容

90 篇文章

订阅专栏

输入字段未提供具体内容，无法生成摘要。

<!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>