`
unbounder
  • 浏览: 174327 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

页面刷新时保留input键入值

阅读更多
一般来说,页面刷新时不保留input键入值的需要比较多,但是也有例外,譬如咱这次就遇上需要保留input键入值。
在firefox这不是问题,ie的刷新机制导致刷新页面时不会从浏览器缓存中读取,所以我们需要解决的问题也集中在ie下。

询问google老师,有以下方法
<meta name="save" content="history">
<style type="text/css">
	input{behavior:url(#default#savehistory)};
 </style>

大致思路是利用行为标签(behavior),在访问页面时默认读取缓存,这里主要是针对ie,firefox默认设置就是如此.
关于behavior标签的使用方法,相见css手册
引用
语法:

behavior : url (url) | url (#objID ) | url (#default#behaviorName)

参数:

url (url) : 使用绝对或相对地址指定DHTML行为组件(.htc)
url (#objID ) : 用二进制实现DHTML行为,#objID为object对象指定的id特性
url (#default#behaviorName) : IE的默认行为。由behaviorName指定

说明:

设置或检索对象的DHTML行为。
多个行为之间用空格隔开。
关于DHTML行为,请参阅我所编写的其他教程。
对应的脚本特性为behavior。请参阅我编写的其他书目。

示例:

div { behavior: url(fly.htc) url(shy.htc); }

如此这般操作后,使用浏览器的刷新按钮在ie下已经能保存input键入值了。
-----------------------------------------------------
不过,我们的工作还没有结束,因为在实际使用中,需要通过js来刷新页面。如果使用window.location.reload();这样的常用刷新操作,ie下依旧会重新加载而不读取浏览器缓存。

那么新的问题出现了,如何才能在用js刷新页面的情况下仍然保存上一次input的键入值呢?
为此,我们更换了刷新方法,使用了execCommand方法
不过值得注意的是execCommand方法并不适应于firefox,我们在js中使用try/catch来解决这个问题,代码如下:
		try{
            //for IE
			document.execCommand('Refresh',false,0);
        }catch (BorwerSupportException){
            //for firefox
			window.location.reload();
        }

测试通过,成功!
17
3
分享到:
评论
9 楼 曦阳向上 2013-08-26  
我怎么没有成功呢?思考中。。。
8 楼 actan 2009-09-03  
不错,收藏了!
我在cookie里搞过
也能实现

不过一直感觉有这种需求的客户都是变态
7 楼 zhangyou1010 2009-09-02  
学习了。
6 楼 gokure 2009-09-01  
顺路学习下
5 楼 unbounder 2009-09-01  
zhanglian123 写道
直接用AJAX 来刷新,不行?
AJAX刷新,区域可以控制,想刷新哪里,就可以刷新哪里,只用定义刷新ID.

是的,如果需要刷新的区域小,用ajax倒是问题没什么问题,只是这里需要刷新的内容挺多的。
╮(╯▽╰)╭,说到底需求太偏僻了。。
4 楼 jejwe 2009-09-01  
在IE下用input{behavior:url(#default#userData)}也可以保存数据。可以当缓存用
3 楼 zhanglian123 2009-09-01  
直接用AJAX 来刷新,不行?
AJAX刷新,区域可以控制,想刷新哪里,就可以刷新哪里,只用定义刷新ID.
2 楼 unbounder 2009-09-01  
yuyoo4j 写道
感觉还不如放在cookie呢.

是的,放cookie是很简单的解决方案,我们甚至还想过用个ajax丢session里面去。
但是在设计时害怕用户禁用cookie,因为这里要保留的数据对于后面的操作很重要。
1 楼 yuyoo4j 2009-09-01  
感觉还不如放在cookie呢.

相关推荐

    vue单页应用在页面刷新时保留状态数据的方法

    为了在页面刷新时保留状态数据,我们通常需要借助Web存储技术,如localStorage或sessionStorage,来存储应用的状态信息,并在页面加载时从存储中读取这些信息来重建状态。 在文章中,作者介绍了两种解决方案来解决...

    jquery获取form表单input元素值的简单实例

    总的来说,通过本篇内容的介绍,我们可以了解到jQuery的val()方法和attr()方法在获取和设置表单input元素值时的使用方法和不同场景下的适用性。此外,还了解到了原生JavaScript在操作表单元素值时的方法。这些知识在...

    jQuery/JS监听input输入框值变化实例

    文中示例了如何使用.on('input', function() {...})来监听input元素的值变化,并在值变化时执行相应的JavaScript函数。 此外,onpropertychange事件也在文中被提及。onpropertychange是一种特定于IE浏览器的事件,...

    防止页面刷新、定时刷新间隔刷新

    每次提交表单时都验证该Token的有效性,一旦验证通过就立即作废,这样即使用户再次刷新页面也不会被重复提交。 - 示例代码: ```html &lt;input type="hidden" name="token" value="("token") %&gt;"&gt; &lt;!-- 其他表单...

    layui点击按钮页面会自动刷新的解决方案

    这种方法的原理是,&lt;input type="button"&gt;在所有浏览器中都不会导致表单提交,因此可以避免页面刷新问题。 #### 解决方案二:修改标签的type属性 另一种方法是在标签上显式地设置type属性为"button"。这样做可以...

    CS取前台INPUT值

    "CS取前台INPUT值"这个主题涉及到如何从Web页面的前端获取用户输入的数据,并在C#后台处理这些数据。这在办公自动化(OA)系统和其他需要用户交互的应用程序中是非常常见的需求。 首先,我们需要理解Web页面的基本...

    js页面刷新大全

    &lt;input type="button" value="刷新父页面" onclick="window.parent.location.reload()"&gt; ``` 2. 使用 window.parent.frames[] 方法:可以用来刷新父页面中的指定框架。 ```javascript &lt;input type="button" value=...

    将name值一样的input值拼接起来

    如果多个`&lt;input&gt;`元素具有相同的`name`值,那么在提交表单时,浏览器会将这些值以数组的形式发送到服务器。 当需要将这些同名的输入值拼接成一个字符串时,我们可以按照以下步骤进行: 1. **获取元素**:使用...

    jQuery在div中去input的值

    这段代码会在文档加载完成时运行,获取input的值,并将其输出到浏览器的控制台。同时,它还会将input的值更新为"新值"。 在实际开发中,可能需要动态处理input的值。例如,你可能希望在用户输入时实时更新某个元素...

    iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 兼容ios8 ios9 ios 10

    js刷新页面 方法大全

    在JavaScript中,刷新页面是一种常见的操作,特别是在处理多框架页面或者单页面应用时。本文将详细介绍几种使用JavaScript刷新页面的方法,并结合一个具体的示例来解释它们的用法。 1. `window.location.reload()`:...

    struts token 防止页面刷新,重复提交

    ### Struts Token机制防止页面刷新及重复提交 在Web应用开发过程中,特别是在使用MVC框架如Apache Struts进行开发时,防止表单重复提交是一个重要的安全措施。表单重复提交通常发生在用户点击“提交”按钮后,由于...

    jQuery鼠标滚动设置input值代码.zip

    当滚轮向上滚动时,input的值增加1;当滚轮向下滚动时,如果当前值大于0,则减小1。`parseInt()`用于将input的值转换为整数,`Math.max(0, ...)`确保值不会小于0。 此外,我们还需要确保页面加载了jQuery库和mouse...

    利用JS响应式修改vue实现页面的input值

    在本文中,我们将深入探讨如何利用JavaScript响应式地修改Vue中的页面输入值,以便在特定场景下实现自动填充和触发相应操作。 首先,让我们回顾一下问题的背景。在基于Vue的登录页面中,有一个需求是当从APP端调用...

    js与jquery实时监听输入框值的oninput与onpropertychange方法

    主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下

    jQuery无刷新实时修改网页Input的内容

    内容索引:脚本资源,jQuery,无刷新修改 jQuery无刷新实时修改网页Input的内容,可以把input数据在不经过数据读取的情况下及时修改,增强用户体验,确认修改后再上传数据库。  这种功能估计大家以前都见到过的,...

    jquery获取input表单值的代码

    jquery取radio单选按钮的值$(“input[name=’items’]:checked”).val();jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(...

    Jquery即时页面刷新过滤器示例

    通过绑定`keyup`事件到文本输入框,每当用户在输入框中键入内容时,都会触发相应的处理函数。 在处理函数中,我们可以获取输入框的当前值,然后遍历表格中的每一行,使用`.filter()`方法根据输入内容过滤行。例如:...

    WebBrowser 如何读出input 的value值。谢谢

    此外,如果页面是动态加载的,可能需要处理异步加载的`input`元素,这通常发生在JavaScript操作中。这时,你可以利用`WebBrowser`控件的`DocumentText`或`DocumentStream`属性监控DOM的变化,或者使用`NewWindow`...

    asp+ajax 无刷新 修改价格 数量 input

    3. **AJAX调用**:当用户更改input值时,`modify.js`中的JavaScript代码会监听这些事件,并通过AJAX调用`modify.asp`来处理数据。 4. **服务器处理**:`modify.asp`接收来自前端的请求,可能包含新输入的价格和数量...

Global site tag (gtag.js) - Google Analytics