zoukankan      html  css  js  c++  java
  • 对于placeholder浏览器兼容性(包括密码输入框)解决办法

    将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值):

    <script type="text/javascript">


    $(function () {
    // 如果不支持placeholder,用jQuery来完成
    if (!isSupportPlaceholder()) {
    // 遍历所有input对象, 除了密码框
    $('input').not("input[type='password']").each(
    function () {
    var self = $(this);
    var val = self.attr("placeholder");
    input(self, val);
    }
    );

    /**//* 对password框的特殊处理
    * 1.创建一个text框
    * 2.获取焦点和失去焦点的时候切换
    */
    $('input[type="password"]').each(
    function () {
    var pwdField = $(this);
    var pwdVal = pwdField.attr('placeholder');
    var pwdId = pwdField.attr('id');
    // 重命名该input的id为原id后跟1
    pwdField.after('<input id="' + pwdId + '1" type="text" value=' + pwdVal + ' autocomplete="off" />');
    var pwdPlaceholder = $('#' + pwdId + '1');
    pwdPlaceholder.show();
    pwdField.hide();

    pwdPlaceholder.focus(function () {
    pwdPlaceholder.hide();
    pwdField.show();
    pwdField.focus();
    });

    pwdField.blur(function () {
    if (pwdField.val() == '') {
    pwdPlaceholder.show();
    pwdField.hide();
    }
    });
    }
    );
    }
    });

    // 判断浏览器是否支持placeholder属性
    function isSupportPlaceholder() {
    var input = document.createElement('input');
    return 'placeholder' in input;
    }

    // jQuery替换placeholder的处理
    function input(obj, val) {
    var $input = obj;
    var val = val;
    $input.attr({ value: val });
    $input.focus(function () {
    if ($input.val() == val) {
    $(this).attr({ value: "" });
    }
    }).blur(function () {
    if ($input.val() == "") {
    $(this).attr({ value: val });
    }
    });
    }

    </script>


    <style type="text/css">
    /* 设置提示文字颜色 */
    ::-webkit-input-placeholder {
    color: #838383;
    }

    :-moz-placeholder {
    color: #838383;
    }

    .placeholder {
    color: #ccc;
    }
    </style>

  • 相关阅读:
    Nginx实现动静分离
    Nginx实现负载均衡
    Linux安装Kafka
    Linux安装RocketMQ
    转://ORA-00603,ORA-27501,ORA-27300,ORA-27301,ORA-27302故障案例一则
    CPU, PSU, SPU
    转://Oracle打补丁方法论
    转://Oracle数据库补丁分析实践
    转://Linux Multipath多路径配置与使用案例
    转://Oracle中定义者权限和调用者权限案例分析
  • 原文地址:https://www.cnblogs.com/sharing1986687846/p/5784270.html
Copyright © 2011-2022 走看看