• 对于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>

  • 相关阅读:
    关于读者来信的一些思考
    serializeArray()与serialize()的区别
    懒人代码-顶部栏
    $.ajax()方法详解
    JavaScript(js)对象常用操作,JS操作JSON总结
    js 获取手机浏览器类型,修改css文件的class的值
    阻止在极短的时间重复执行某个函数
    android WebViewClient和WebChromeClient
    java枚举使用详解
    android-async-http
  • 原文地址:https://www.cnblogs.com/sharing1986687846/p/5784270.html
Copyright © 2020-2023  润新知