对于input标签兼容问题的处理

placeholder属性

placeholder属性想必大家都不陌生，在表单的制作中经常会使用这个属性，在写西部经济研究院页面时，我遇到了placeholder的兼容问题，在此我整理一下解决思路。

placeholder属性有以下特征

placeholder属性在只在IE9以上的浏览器兼容
在Firefox/Chrome/Safari浏览器下点击placeholder，字符不会消失
在IE 10+里鼠标点击时（获取焦点）placeholder文本消失

所以我采取了用label标签伪装成placeholder的方法，将label绝对定位覆盖在placeholder的位置上以达到伪装的效果

function change(element,eleLabel) {
    element.onfocus = function(){
        eleLabel.style.top="-15%";
        eleLabel.style.fontSize = "14px";
        eleLabel.style.color = "rgba(0, 0, 0, 0.38)";
    };
    element.onblur = function () {
        if (element.value.length<=0){//如果有输入的值，label将不回到原处
            eleLabel.style.top = "45%";
            eleLabel.style.fontSize = "20px";
            eleLabel.style.color ="rgba(0, 0, 0, 0.12)";
        }
    };
}

在change函数中，我利用onblus属性和onfocus属性来设置label标签的位置，同时，考虑到label标签不会像placeholder一样，当value值不为空时就自动消失，所以我做了一个判断，当value值不为空时，label值不回到原处

此时表现出来的界面如下

在这里插入图片描述

显示

input在IE edge和高版本浏览器的显示上也有差别

IE浏览器
普通浏览器

我们可以用以下的css代码进行兼容处理

input::-ms-clear, input::-ms-reveal{display: none;}
/*为了清除ie下的x和眼睛*/

文本长度问题

众所周知，maxlength属性规定输入字段的最大长度,可是在IE 10以下版本的浏览器是不兼容该属性的，为了解决这个问题，我用HTML 5新出的pattern属性替代了maxlength属性。以下是我从w3school引用的对pattern属性的介绍。

定义和用法
pattern 属性规定用于验证输入字段的模式。
模式指的是正则表达式。您可以在我们的 JavaScript 教程中阅读到这方面的内容。
注释：pattern 属性适用于以下类型：text, search, url, telephone, email 以及 password 。
提示：请使用标准的 “title” 属性来描述模式。

因此，我用下列代码解决了maxlength的兼容问题，将用户输入控制在4-32个字符之间

<input type="text" id="user" autocomplete="off" required="required"  pattern=".{4,32}">

盒子阴影问题

刚刚提到用pattern属性解决了maxlength的兼容问题，可是pattern属性又带来了其他的问题，在火狐浏览器中，当input设置了pattern"属性时，若用户的填写不符合规范，input盒子外面就会出现一圈红色的边框，而在其他浏览器下不会出现，这个边框是盒子阴影
在这里插入图片描述

-moz-box-shadow:none;/*兼容老版本火狐*/
box-shadow: none;/*去除火狐因为pattern属性产生的粉红色边框*/

黄色背景问题

在谷歌浏览器下，当记住密码时，输入框会有一个默认的黄色背景，这个黄色背景不能通过设置background-color来去除，可以用纯色内阴影覆盖的方式把它遮盖。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fafafa inset;
    /*使用足够大的纯色内阴影覆盖谷歌浏览器因为记住密码产生的黄色背景*/
}

对于input标签兼容问题的处理

猜你喜欢