如何搞定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浏览器表单自动回填兼容问题的更多相关文章
- 100天搞定机器学习|Day16 通过内核技巧实现SVM
前情回顾 机器学习100天|Day1数据预处理100天搞定机器学习|Day2简单线性回归分析100天搞定机器学习|Day3多元线性回归100天搞定机器学习|Day4-6 逻辑回归100天搞定机器学习| ...
- #-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景
google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素 ...
- Python系列教程-详细版 | 图文+代码,快速搞定Python编程(附全套速查表)
作者:韩信子@ShowMeAI 教程地址:http://showmeai.tech/article-detail/python-tutorial 声明:版权所有,转载请联系平台与作者并注明出处 引言 ...
- 区别原生chrome 和以chrome为内核的360浏览器
function isChrome360() { if( navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ) { var des ...
- 100天搞定机器学习|Day21 Beautiful Soup
前情回顾 机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机 ...
- 100天搞定机器学习|Day22 机器为什么能学习?
前情回顾 机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机 ...
- 100天搞定机器学习|Day33-34 随机森林
前情回顾 机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机 ...
- 100天搞定机器学习|Day35 深度学习之神经网络的结构
100天搞定机器学习|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机器学习 ...
- STM32F103C8T6最小板搞定CMSIS-DAP和SWO功能
转载:http://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616081&extra=page%3D&am ...
随机推荐
- Debian/Ubuntu安装SSH-Server(SFTP)
在Debian/Ubuntu命令行执行: sudo apt-get update sudo apt-get install ssh sudo apt-get install openssh-serve ...
- FREEBSD手工配置网络
在FreeBSD系统中,网络能力十分重要,对于一个标准的FreeBSD系统,至少要有一个网络界面以便与其他计算机通信.最常见的网络界面为以太网卡.此外FreeBSD也支持Token Ring和FDDI ...
- Javascript自执行匿名函数(function() { })()的原理分析
匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hell ...
- mysql 5分钟倒计时
select * ,now(), DATE_ADD(create_time, INTERVAL 5 MINUTE) from ecs_sms_cache where now() between cre ...
- Twisted随笔
学习了socket后决定尝试使用框架,目标锁定了Twisted. 什么是Twisted? twisted是一个用python语言写的事件驱动的网络框架,他支持很多种协议,包括UDP,TCP,TLS和其 ...
- 前端神器avalonJS入门(一)
转自:http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angula ...
- iOS代码规范
一.文档结构管理 1.建立Libraries文件夹,所有第三方库放入其中. 2.建立Utilities文件夹,自已封装的类放入其中. 3.建立Constants.h头文件,所有的常量定义于其中.Con ...
- ThinkPhp 3.2 数据的连贯操作
ThinkPHP模型基础类提供的连贯操作方法(也有些框架称之为链式操作),可以有效的提高数据存取的代码清晰度和开发效率,并且支持所有的CURD操作. 使用也比较简单, 假如我们现在要查询一个User表 ...
- C++重载new和delete运算符
内存管理运算符 new.new[].delete 和 delete[] 也可以进行重载,其重载形式既可以是类的成员函数,也可以是全局函数.一般情况下,内建的内存管理运算符就够用了,只有在需要自己管理内 ...
- 后台动态添加的button,如何触发button_click事件?
后台动态添加的button,需要在Page_Load或者Page_Init重新动态生成才能执行button_click public Panel GetContrlType() { Panel pan ...