IE8 不支持html5 placeholder的解决方案

简介:

 IE8不支持html5 placeholder的解决方法。

复制代码
/**
 * jQuery EnPlaceholder plug
 * version 1.0                            2014.07.01戈志刚
 * by Frans.Lee <dmon@foxmail.com>  http://www.ifrans.cn
 */
(function ($) {
    $.fn.extend({
        "iePlaceholder":function (options) {
            options = $.extend({
                placeholderColor:'#999',
                isUseSpan:true,
                onInput:true
            }, options);
            
            $(this).each(function () {
                var _this = this;
                var supportPlaceholder = 'placeholder' in document.createElement('input');
                if (!supportPlaceholder) {
                    var defaultValue = $(_this).attr('placeholder');
                    var defaultColor = $(_this).css('color');
                    if (options.isUseSpan == false) {
                        $(_this).focus(function () {
                            var pattern = new RegExp("^" + defaultValue + "$|^$");
                            pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
                        }).blur(function () {
                                if ($(_this).val() == defaultValue) {
                                    $(_this).css('color', defaultColor);
                                } else if ($(_this).val().length == 0) {
                                    $(_this).val(defaultValue).css('color', options.placeholderColor)
                                }
                            }).trigger('blur');
                    } else {
                        var $imitate = $('<span class="wrap-placeholder" style="position:absolute; display:inline-block; overflow:hidden; color:'+options.placeholderColor+'; width:'+$(_this).width()+'px; height:'+$(_this).outerHeight()+'px;">' + (defaultValue==undefined?"":defaultValue) + '</span>');
                        //hg-add
                        $(_this).focus(function(){
                            $imitate.hide();
                        }).blur(function () {
                                    /^$/.test($(_this).val()) && $imitate.show();
                                });
                        $imitate.css({
                            'margin-left':$(_this).css('margin-left'),
                            'margin-top':$(_this).css('margin-top'),
                            'text-align':'left',
                            'font-size':$(_this).css('font-size'),
                            'font-family':$(_this).css('font-family'),
                            'font-weight':$(_this).css('font-weight'),
                            'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px',
                            'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px',
                            'padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0
                        });
                        $(_this).before($imitate.click(function () {
                            $(_this).trigger('focus');
                        }));

                        $(_this).val().length != 0 && $imitate.hide();

                        if (options.onInput) {
                            var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
                            $(_this).bind(inputChangeEvent, function () {
                                $imitate[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
                            });
                        } else {
                            $(_this).focus(function () {
                                $imitate.hide();
                            }).blur(function () {
                                    /^$/.test($(_this).val()) && $imitate.show();
                                });
                        }
                    }
                }
            });
            return this;
        }
    });
})(jQuery);

/*调用方式: textarea需要田间onInput=false属性*/
$('input[placeholder], textarea[placeholder]').each(function(){$(this).is('input')?$(this).iePlaceholder():$(this).iePlaceholder({onInput: false});});

$(document).ready(function(){
            if (typeof (Worker) == "undefined"){
                $('input[placeholder], textarea[placeholder]').each(function(){$(this).is('input')?$(this).iePlaceholder():$(this).iePlaceholder({onInput: false});});
            }
                
            });
复制代码

  测试html

复制代码
<!DOCTYPE html>  
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!--便于页面更好的在移动平台上展示。 
        <meta name="viewport" content="initial-scale=1.0,user-scalable=no">  
        -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Content-Language" content="utf-8" />
        <meta name="author" content="Gezhigang" />
        <title>placeholder</title>

        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="placeholder.js"></script>
        
    </head>
    <body>
        <div style="margin-left: 30%;margin-top: 10%;">
            <form>
                <table>
                    <tr>
                        <td height="30px">用户名</td>
                        <td><input type="text" placeholder="这里输入帐号。。。"/></td>
                    </tr>
                    <tr >
                        <td height="30px">密码</td>
                        <td><input type="text" placeholder="这里输入密码。。。"/></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><input type="submit" value="会员登录" /></td>
                    </tr>
                </table>
            </form>
        </div>    
    </body>
</html>
复制代码





本文转自秋楓博客园博客,原文链接:http://www.cnblogs.com/rwxwsblog/p/5193772.html,如需转载请自行联系原作者
目录
相关文章
|
6月前
|
Web App开发 前端开发 开发者
|
9月前
|
容器
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
214 0
|
9月前
Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案
Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案
263 0
|
7月前
|
移动开发 HTML5
修改HTML5 input placeholder 颜色及修改失效的解决办法
修改HTML5 input placeholder 颜色及修改失效的解决办法
|
9月前
|
数据库
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)
363 0
|
9月前
|
前端开发 PHP
web开发HTML生成PDF的三种解决方案(服务器端mpdf、html2canvas.js、浏览器打印、PDF虚拟打印机)
web开发HTML生成PDF的三种解决方案(服务器端mpdf、html2canvas.js、浏览器打印、PDF虚拟打印机)
764 0
|
9月前
|
PHP
smarty模版引擎在HTML中常用的循环实例解决方案
smarty模版引擎在HTML中常用的循环实例解决方案
33 0
|
9月前
html2canvas生成PDF并下载的解决方案
html2canvas生成PDF并下载的解决方案
119 0
|
9月前
|
移动开发 安全 JavaScript
html5使用postMessage解决跨域和跨窗口消息传递的解决方案
html5使用postMessage解决跨域和跨窗口消息传递的解决方案
107 0
|
9月前
|
前端开发
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
102 0