【优化】完美解决部分浏览器不支持placeholder的解决方案

最新推荐文章于 2022-10-12 15:05:37 发布

放荡不羁的圣诞老人

最新推荐文章于 2022-10-12 15:05:37 发布

阅读量698

点赞数

分类专栏：前端早读课文章标签：浏览器优化 javascript 解决方案 HTML5

本文链接：https://blog.csdn.net/laosaidan/article/details/75216805

版权

本文介绍如何在不支持placeholder属性的浏览器中实现输入框提示文字的显示，包括页面加载时显示placeholder值、js动态设置以及针对password类型input的特殊处理。通过value模拟和label标签模拟两种方法实现兼容性。

摘要由CSDN通过智能技术生成

本文是在前人的基础上，结合项目中的实际需求做了相关优化。

支持以下内容：

1，页面加载时显示页面中的placeholder属性值；

2，通过js动态的设置input的placeholder值；

3，特殊处理password类型的input框；

实现input的placeholder值在不支持的浏览器上显示，目前有两种比较主流的方法：1，通过value值模拟；2，通过label标签模拟。普通类型的input框可以任选其中一种方式，但password类型的就只能使用第二种了，废话不多说，直接贴代码。

一，placeholderSupport。首先先判断当前浏览器是否支持placeholder，如果不支持模拟实现之

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

二，isFitToPlaceholderOnEE。此方法是页面加载时调用的，目的是处理页面中已经包含placeholder属性的input框。

/**
 * 处理Placeholder，fit所有浏览器
 */
function isFitToPlaceholderOnEE() {
    // 如果不支持placeholder，用jQuery来完成
    if(!placeholderSupport()) {
        // 遍历所有input对象, 除了密码框
        $('input').not("input[type='password']").each(
            function() {
                var self = $(this);
                var val = self.attr("placeholder");
                if(!isNull(val)){
                    setAttrPlaceholderOnEE(self,val,"1");
                }
            }
        );

        /* 对password框的特殊处理
         　　* 1.创建一个label框
         　　* 2.获取焦点和失去焦点的时候切换
         　　*/
        $('input[type="password"]').each(
            function() {
                var pwdField    = $(this);
                var pwdVal      = isNull(pwdField.attr('placeholder'))?'':pwdField.attr('placeholder');
                if(!isNull(pwdVal)){
                    setAttrPlaceholderOnEE(pwdField,pwdVal,"1");
                }
            }
        );
    }else{
        //处理部分浏览器虽然支持ÿ

最低0.47元/天解锁文章