最近开发中碰到一个关于表单问题,在用户提交表单时候浏览器会提示是否保存帐号

如果点击保存,在退出帐号切换其他帐号时,浏览器会自动为表单填充数据,为了解决这个自动填充问题时,

主要分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浏览器表单自动回填兼容问题的更多相关文章

  1. 100天搞定机器学习|Day16 通过内核技巧实现SVM

    前情回顾 机器学习100天|Day1数据预处理100天搞定机器学习|Day2简单线性回归分析100天搞定机器学习|Day3多元线性回归100天搞定机器学习|Day4-6 逻辑回归100天搞定机器学习| ...

  2. #-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景

    google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素 ...

  3. Python系列教程-详细版 | 图文+代码,快速搞定Python编程(附全套速查表)

    作者:韩信子@ShowMeAI 教程地址:http://showmeai.tech/article-detail/python-tutorial 声明:版权所有,转载请联系平台与作者并注明出处 引言 ...

  4. 区别原生chrome 和以chrome为内核的360浏览器

    function isChrome360() { if( navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ) { var des ...

  5. 100天搞定机器学习|Day21 Beautiful Soup

    前情回顾 机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机 ...

  6. 100天搞定机器学习|Day22 机器为什么能学习?

    前情回顾 机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机 ...

  7. 100天搞定机器学习|Day33-34 随机森林

    前情回顾 机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机 ...

  8. 100天搞定机器学习|Day35 深度学习之神经网络的结构

    100天搞定机器学习|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机器学习 ...

  9. STM32F103C8T6最小板搞定CMSIS-DAP和SWO功能

    转载:http://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616081&extra=page%3D&am ...

随机推荐

  1. 高通vuforia+Unity3D 制作ar app

    很简单就可以用Unity3D做出增强现实的一个小例子 新人第一次写博客,若出现错误望指正^_^ 需要下载de东西: unity3d 5.0 http://unity3d.com/get-unity   ...

  2. sublime 插件推荐: Nettuts+ Fetch

    Nettuts+ Fetch github地址:Nettuts-Fetch 在sublime中直接用 ctrl+shift+P -> pci -> Nettuts-Fetch 即可下载 这 ...

  3. WKWebView与JavaScript交互基础

    login.html 代码 <!DOCTYPE html> <html> <head> <title>使用JavaScript</title> ...

  4. Python OOP(面向对象编程)

    一OOP的作用 在Python中,类是面向对象设计(OOP)的主要工具.通过使用类这种工具,OOP可以: 1.分解代码,最小化代码的冗余. 2.通过定制现有的代码,来编写新的程序,而不用在原处进行修改 ...

  5. protobuf中文教程(第一篇)

    声明:本文大部分内容翻译自官方英文文档,其中可能穿插着加入自己的语言用以辅助理解,本文禁止转载. 一.什么是protocol buffers Protocol buffers是一个灵活的.高效的.自动 ...

  6. Struts2之HelloWorld

    首先既然是开发Struts程序的话,那么自然需要用到Struts2开发包,Struts2是apache旗下的开源框架,所有的开发包和源代码都可以在Apache官网下载. 那么,就来开始编写第一个Str ...

  7. Java特性之多态父类与子类之间的调用

    问题描述: Java三大特性,封装.继承.多态,一直没搞懂其中多态是什么,最近研究了一下,关于父类和子类之间的调用.下面是一个测试类,源代码如下: package com.test; public c ...

  8. Tensorflow使用环境配置

    windows中不能直接使用Tensorflow,所以得费点劲.(2016.11.29更新,TensorFlow 0.12 中已加入初步的 Windows 原生支持) 先是直接使用了<Deep ...

  9. [Objective-c开源库]HHRouter

    ---恢复内容开始--- 目的 统一客户端内部和外部跳转处理,支持传参数 代码 添加vc,block映射 针对路径做映射,如/user/:userId -> UserViewController ...

  10. Block使用

    1.对block的理解 >  block是iOS4.0之后出现的,是仿照java中匿名函数所创造的,它是c级别的语法,效率比协议-代理高 >  block的是一个匿名函数(没有名字的函数) ...