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>

  • 相关阅读:
    LR和SVM等线性模型比较
    博客内容和格式整理想法
    matlab安装matconvnet出错总结
    《java 核心技术一》第二章java程序设计环境
    《java 核心技术一》第一章 程序设计概论
    java eclipse 程序没错,运行结果显示无法加载主类的解决方法
    《贾平凹--朋友圈子就是你人生的世界》读后感
    java try-catch-finally输出异常
    暑假计划
    java 登录注册小程序
  • 原文地址:https://www.cnblogs.com/sharing1986687846/p/5784270.html
Copyright © 2011-2022 走看看