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

巴特西

如何搞定IE+google双内核的360浏览器表单自动回填兼容问题

最新文章

热门文章