zoukankan      html  css  js  c++  java
  • IE如何兼容placeholder属性

    在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢?

    网上搜索了一下,其实也挺简单的,可以采用以下方法:

    <script type="text/javascript">
        if (!('placeholder' in document.createElement('input'))) {
            $('input[placeholder],textarea[placeholder]').each(function() {
                var that = $(this),
                    text = that.attr('placeholder');
                if (that.val() === "") {
                    that.val(text).addClass('placeholder');
                }
                that.focus(function() {
                    if (that.val() === text) {
                        that.val("").removeClass('placeholder');
                    }
                }).blur(function() {
                    if (that.val() === "") {
                        that.val(text).addClass('placeholder');
                    }
                }).closest('form').submit(function() {
                    if (that.val() === text) {
                        that.val('');
                    }
                });
            });
        }
    <script>
    

      这段代码很容易理解,但是用的时候发现对type=password类型不支持,于是继续搜索直到有了JPlaceHolder.js,感觉很不错,用起来也很简单

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
    
    </head>
    
    <body>
        <input type="password" placeholder="密码">
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="JPlaceHolder.js"></script>
    </body>
    
    </html>
    

      下载地址:JPlaceHolder.js

  • 相关阅读:
    ubuntu16.04安装破解pycharm
    python解压,压缩,以及存数据库的相关操作
    cocoapods Error
    swift项目导入OC框架
    实现全屏滑动返回效果
    Storyboard & XIB 自己的理解
    View & Controller 一些方法的执行顺序
    Touch ID 实现
    Apple Pay 初探
    ReactiveCocoa学习
  • 原文地址:https://www.cnblogs.com/jesse131/p/4918548.html
Copyright © 2011-2022 走看看