如何搞定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="">

 

posted @ 2016-10-14 15:20  知兮  阅读(902)  评论(0编辑  收藏  举报