占位符属性在 Internet Explorer 中不起作用

Posted

技术标签:

【中文标题】占位符属性在 Internet Explorer 中不起作用【英文标题】:Placeholder attribute not working in internet explorer 【发布时间】:2013-02-27 18:57:12 【问题描述】:

internet explorer 中占位符不工作的解决方法如下,结合使用javascript和jquery。

我必须重复一下,对于占位符在 Internet Explorer 中不起作用的问题的解决方案如下,使用 javascript 和 jquery 的组合。

    //DETERMINE BROWSER TYPE
    var browser='';
    jQuery.each(jQuery.browser, function(i, val) 
        if(i=='msie')browser=i;
    );

    if(browser=='msie')
        var password = '<input type="text" value="Password" placeholder="Password" name="q22" class="form-gen-element" id="ie-password-holder" />';

        $(password)
        .insertAfter($('input[name="q2"]'));

        $('input[name="q2"]')
        .hide();

        //INTERNET EXPLORER PLACEHOLDER FIX
        $('#login-content')
        .find('.form-gen-element')
        .focus(function()
            if($(this).val()==$(this).attr('placeholder'))
                //Move cursor position
                if ($(this).get(0).setSelectionRange) 
                  $(this).get(0).setSelectionRange(0, 0);
                 else if ($(this).get(0).createTextRange) 
                  var range = $(this).get(0).createTextRange();
                  range.collapse(true);
                  range.moveEnd('character', 0);
                  range.moveStart('character', 0);
                  range.select();
                
            
        )
        .blur(function()
            if($(this).val()=='')
                $(this).val($(this).attr('placeholder'));

                if($(this).attr('name')=='q2')
                    $(this).attr('type','text');
            
        )
        .keydown(function(e)
            if($(this).val()==$(this).attr('placeholder'))
                if((e.keyCode > 47 && e.keyCode < 91) || e.keyCode==109 || e.keyCode==110 || e.keyCode==190 || e.keyCode==110)
                    var t = $(this).val().split($(this).attr('placeholder'));
                    $(this).val(t[0]);

                    //Handle password attribute change
                    if($(this).attr('name')=='q22')
                        $(this).attr('type','password');
                    
                
            
        );

    else
        //OTHER BROWSERS DEFAULT FUNCTIONALITY
        $('#login-content')
        .find('.form-gen-element')
        .val('');
    
);

【问题讨论】:

【参考方案1】:

查看下面关于 SOInput placeholders for Internet Explorer 的有用问题

【讨论】:

以上是关于占位符属性在 Internet Explorer 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

占位符 Internet Explorer 11 未显示

占位符不适用于 Internet Explorer

在 Internet Explorer 中制作隐形“占位符”很热门?

Internet Explorer 占位符样式问题

占位符文本仅在 Internet Explorer 中可见

为 Internet Explorer 设置占位符? [复制]