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>

  • 相关阅读:
    Hadoop深入学习:MapTask详解
    设计模式系列——三个工厂模式(简单工厂模式,工厂方法模式,抽象工厂模式)
    GIT使用教程与基本原理
    网络爬虫浅析
    字符串模式匹配sunday算法
    linux ---- diff命令
    递归树的算法分析
    二叉树非递归实现
    链表相邻元素交换
    明星问题
  • 原文地址:https://www.cnblogs.com/sharing1986687846/p/5784270.html
Copyright © 2011-2022 走看看