需求说明:页面表单用前端用div布局,提交之后跳转到另一个页面,但是考虑到客户奇怪的脑回路,可能会点击浏览器的后退按钮,不知道是个体情况还是都是一样,原本div中填写的数据还依然存在,所以需要让页面在后退后div显示为空.

  解决过程:找了两个前端的,说没碰到过这种情况,无奈只能自己解决.我定义了一个方法,在点击提交之后,会立即清除div中的数据,但是这样,用jQuery提交的数据也变成了空.后来我采用setTimeout延时清除div中的数据.此方法为拍脑门想出来的,会受网速等其他因素影响,不好用.

  案例代码:  

 1 //提交动作
2 $('#submit').on('click', function(){
3 $("#submitForm")[0].click();
4 setTimeout(clear(), "150");//延时50毫秒执行
5 }
6
7 //提交之后数据置为空
8 function clear(){
9 $('#num1').val(0);
10 $('#num2').val(0);
11 $('#num3').val(0);
12 $('#num4').val(0);
13 $('#num5').val(0);
14 $('#num6').val(0);
15 }

  解决方法:找到的一个属性 autocomplete="off".

//将他放在
<input type="text" autocomplete="off" /> //或是直接放在 form <form autocomplete="off" >

  结果:欧克!

浏览器后退->清除原页面div中填写的数据的更多相关文章

  1. [原]在GeoServer中为OpenStreetMap数据设置OSM样式

    转载请注明作者think8848和出处(http://think8848.cnblogs.com) 在前面几篇文章中,我们讲到了部署Postgresql,部署PostGis,部署GeoServer以及 ...

  2. Vue完成页面切换中加载数据

    created() { // 拿到路由传递来的car主键 let pk = this.$route.query.pk || this.$route.params.pk; // 主键不存在,就直接结束方 ...

  3. div中嵌套div速度将会同样很慢

    ---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...

  4. jQuery页面滚动底部加载数据

    $(window).scroll(function () {        var scrollTop = $(this).scrollTop();        var scrollHeight = ...

  5. OAF中下载附件之后页面失效,报过时的数据异常,浏览器后退异常

    我在使用了下载功能之后,再往页面添加行或进行保存,页面老是报浏览器后退的异常. 猜测是因为我的下载按钮使用的submitButton,它隐式的包含了一个submit动作,且我在代码中有一个Commit ...

  6. div中显示页面

    在css中显示页面,在页面布局中很多时候都要在一个div 里显示某些页面.在这里写下我用到的一种方式. <script type="text/javascript"> ...

  7. 浏览器通过Scheme协议启动APP中的页面

    在APP开发过程中,通过外部浏览器调起APP页面的场景也很普遍使用.下面就介绍一下通过外部H5页面唤起APP中页面的通用方法. 1.首先需要在AndroidMainifest.xml中对你要启动的那个 ...

  8. div中让内容能不换行就尽量不换行.【纯原】

    div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐. <html> <head> <title>九歌·少司命</title> <style ...

  9. vue 移动端禁止浏览器后退,禁止安卓和ios点击后退操作乱跳页面

    开发微信公众号网页,页面登录成功之后,是禁止再次返回到登录页. 我在页面设置了让禁止跳到登录页,可是在手机上有自带的微信浏览器后退按钮,所以必须要禁止浏览器后退,才能禁止后退到登录页. 刚开始百度,查 ...

随机推荐

  1. 二、搭建SpringBoot项目

    与其说是搭建,还不如说去下载...(注意,在此之前要确保你的3000块钱的笔记本上安装了JDK8+已经最新的相对较新的maven:apache-maven-3.6.0,至于JDK以及maven的相关安 ...

  2. 日期 Date()

    1.Date 对象用于处理日期和时间.创建 Date 对象的语法:var myDate=new Date()Date 对象会自动把当前日期和时间保存为其初始值.2.参数形式有以下5种: new Dat ...

  3. xunsearch

    xunsearch 1.wget http://www.xunsearch.com/download/xunsearch-full-latest.tar.bz2 2.解压 tar -jxvf xuns ...

  4. 老男孩Day11作业:selectors版socket

    一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP 允许多用户并发上传下载文件 二.readme 一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP ...

  5. 并查集简述 (HDU-1213-How Many Tables)

    并查集主要解决集合的有关运算,主要操作是查找操作和并操作. 1.集合的储存方式. 为便于查找,集合通常以树结构储存,每个元素分 数据域和指针域,可以用链式储存,也可以用结构数组储存,用根节点来表示一个 ...

  6. 1、Numpy基础

    NumPy是什么? NumPy是科学计算的基本包在Python中. 这是一个Python库,它提供了一个多维数组对象, 各种派生的对象(如蒙面数组和矩阵),和一个 快速操作数组的各式各样的例程,包括 ...

  7. js 任意元素解绑任意事件的兼容代码

    hmtl代码: <input type="button" value="按钮" id="btn"/> <input typ ...

  8. SQL中删除重复的行(重复数据),只保留一行 转

    方法一:使用在T-SQL的编程中 分配一个列号码,以COL1,COL2组合来分区排序,删除DATABASE重复的行(重复数据),只保留一行 // COL1,COL2是数据库DATABASE的栏位 de ...

  9. JavaWeb学习笔记(六)—— Cookie&Session

    一.会话技术简介 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 在日常生活中,从拨通电话到挂断电话之间的一连串的你问我答的过程 ...

  10. Spring学习笔记(四)—— Spring中的AOP

    一.AOP概述 AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.O ...