如何搞定IE+google双内核的360浏览器表单自动回填兼容问题
最近开发中碰到一个关于表单问题,在用户提交表单时候浏览器会提示是否保存帐号
如果点击保存,在退出帐号切换其他帐号时,浏览器会自动为表单填充数据,为了解决这个自动填充问题时,
主要分2个思路来解决,一个是在极速模式(google内核)下,浏览器会给包含有type为password的表单填充,
解决办法是加载页面时把password改成text,获取焦点时再变成password,就可以解决了
二是在兼容模式(IE内核)下,上一个方法就不行了,IE填充规则是在前一个是text,后一个是password的组合下才会自动填充
解决办法是在中间插入一个空ipunt关让其隐藏
以下贴上代码
@extends('layouts.myuser') @section('content') <div class="login-bg"> <div class="main"> <div class="login"> <div class="title"><span>{{trans('login.login_no_post')}} </span> @if ($errors->has('loginError')) <i class="iconfontBusy "></i><span class="errorInfo">{{ $errors->first('loginError') }} </span>@endif </div> {{Form::open(['id'=>'myformID'])}} <ul class="form"> <li> <span class="placeholder">{{trans('login.login_input_mobile')}}</span> <span class="user"></span> <span class="valid"></span> {{Form::text('name','',['autocomplete'=>'off','id'=>'name','placeholder'=>''])}} <p class="showError"><label class="error" for="name">{{$errors->has('name') ? $errors->first('name') :''}}</label></p> </li> <li> <span class="placeholder">{{trans('login.login_pwd')}}</span> <span class="password"></span> <input style="display: none;"> {{Form::password('password',['autocomplete'=>'off','id'=>'password','placeholder'=>'','onfocus'=>"this.type='password'"])}} <p class="showError"><label class="error" for="password">{{$errors->has('password') ? $errors->first('password') :''}}</label></p> </li> <li> <div class="desc"><a href="{{ route('my_user.register') }}">{{ trans('login.login_register') }}</a> | <a href="{{ route('my_user.user.forgetpwd') }}">{{ trans('login.login_forget_pwd') }}</a></div> <div class="submit" id="submit" onclick="common.formSubmitEvent()">登录</div> </li> </ul> {{ Form::close() }} </div> </div> </div> @stop @section('footer_js') <script type="text/javascript" src='{{$static}}myHome/js/user/user.js?v=2016101301'></script> @endsection @push('scripts') <script type="text/javascript"> document.getElementById('password').type='text'; common.addJqueryCheckMethodEvent('phone'); common.mobileValidEvent(); common.ebterSubmitEvent(); common.addPassEvent('.login :input'); </script>
{{Form::password('password',['autocomplete'=>'off','id'=>'password','placeholder'=>'','onfocus'=>"this.type='password'"])}} //上面PHP写法用JS写法 <input autocomplete="off" id="password" placeholder="" onfocus="this.type='password'" name="text" type="text" value="">