关于 input在 chrome 、IE浏览器中遇到的兼容性问题处理

た入场券 2023-01-20 09:58 13阅读 0赞

**1、谷歌中input自动填入后会出现背景色处理**  
input CSS样式

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { 
    	-webkit-text-fill-color: #ededed !important;
    	-webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
        background-color:transparent;
        background-image: none;
         transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }
    input { 
    	 background-color:transparent;
    }

input scss样式

input { 
          background-color:transparent;
          border: 0px;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 15px;
          color: $bg;
          height: 47px;
          // caret-color: $cursor; &:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { 
            -webkit-text-fill-color: $bg !important;
    	      -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
            background-color:transparent;
            background-image: none;
            transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
          }

**2、谷歌浏览器保存密码后打开页面设置input type=password后会出现自动把账号密码填进去。**  
解决思路，在页面初始化的时候，避免input type=“password” ,设置为text.之后在改回成text。

1、给input标签添加  
autocomplete=“new-password”

2、设置input readonly=true,之后在页面加载完成后再改回readonly=false

<el-input :type="iconFlag?'password':'text'" autocomplete="new-password" v-model="form.Password" :readonly="NewpasswordReadonly" placeholder="确认密码"></el-input>
            <i class="iconfont " :class="iconFlag?'icon-biyan':'icon-zhengyan'" @click="iconFlag=!iconFlag"></i>
     <script> mounted () { setTimeout(() => { this.NewpasswordReadonly = false // 忘记密码登录 密码框设置为readonly为false }, 500) }, </script>

3、设置input type=“text” , 在页面加载完成，或者input获取到焦点的时候改为type=“password”

<el-form-item prop="surePassword">
    
      <el-input :type="flag?'password':'text'" autocomplete="new-password" v-model="form.surePassword" @focus="flag=true" placeholder="确认密码"></el-input>
    </el-form-item>

**3、在IE中input password输入会出现眼睛，text出现x的处理方法**

::-ms-clear, ::-ms-reveal { 
      display: none;
    }