关闭

placeholder IE失效问题

456人阅读 评论(0) 收藏 举报
分类:
<!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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:176374次
    • 积分:3443
    • 等级:
    • 排名:第10104名
    • 原创:142篇
    • 转载:202篇
    • 译文:3篇
    • 评论:6条
    文章分类
    最新评论