• 如何搞定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="">
  • 相关阅读:
    大家帮忙出几个招聘考试题目吧
    单元测试和设计模式在重构中的应用
    想起去年和女朋友第一次去吃饭的事情
    为什么我们常忘记使用正则表达式
    .NET实用设计模式:观察者模式(Observer)
    一个Outlook宏写的小程序,献给象我一样粗心大意的人
    单元测试应该测什么,不应该测什么?
    .NET实用设计模式:工厂模式(Factory)
    2021 系统架构设计师备考分享
    系统架构设计师论文企业集成
  • 原文地址:https://www.cnblogs.com/zhixi/p/5960615.html
Copyright © 2020-2023  润新知