首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端魔法堂:屏蔽Backspace导致页面回退

前言  前几天用户反映在录入资料时一不小心错按Backspace键,就会直接回退到是一个页面,导致之前辛辛苦苦录入的资料全部丢失了。哦?居然还有这种情况。下面我们来一起探讨一下吧!...Windows系统下独有的行为  Windows下的IE、FireFox和Chrome 52之前的浏览器,当焦点不在一个可编辑的元素上时,按Backspace键就会回退到上一个页面,按Shift+Backspace...有3个可选项 0,表示Backspace和Shift+Backspace的行为对应页面回退和前进(Windows下的默认值) 1,表示Backspace和Shift+Backspace的行为对应页面向下滚动和向上滚动...2或其他值,表示不响应Backspace和Shift+Backspace(Ubuntu16下的默认值) 注意:Linux和OS X下的浏览器按Backspace和Shift+Backspace不会触发页面回退和前进...附加功能  现在我们的目的是页面不会因为用户误操作而刷新,导致页面数据丢失。这里有两个组合键同样会的导致页面刷新 ctrl+r刷新当前页面,可被阻止; ctrl+w关闭当前窗体或标签页,无法阻止。

1.3K100

JS监听中文输入

在做第六个项目(根据输入框实时调用AJAX古诗匹配)时,当我们输入中文拼音,还在拼音字符状态未选择成中文时,一直在执行我编写的事件监听处理函数(当输入框里的值有变化时执行此函数, 调用AJAX在页面显示数据里包含这些字的古诗...而我想要的是在我们输入拼音未完成中文选择时,不让其执行我们的监听处理函数, 只有选择完中文后才去执行调用AJAX判断有没有包含输入的这些字的古诗。...="this_input" placeholder="中文输入未完成时不执行事件" /> <script src="http://code.jquery.com/jquery-1.8.3.min.<em>js</em>...false); console.log('完成中文输入'); }); 当我们开始进行input的输入改变了input框里的值时,<em>js</em>...会<em>监听</em>到input propertychange事件, 执行判断(一开始时$(this).prop('cnStart')的值我们没有定义,为undefined, 在<em>监听</em>了compositionstart

9.4K20

javascript如何监听页面刷新和页面关闭事件

在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接、关闭页面、表单提交时等情况,会提示我们是否确认该操作等信息。...(因为,unbeforeunload()是在页面刷新之前触发的事件,而onubload()是在页面关闭之后才会触发的)。 unbeforeunload()事件可以禁止onunload()事件的触发。...onunload()事件是无法阻止页面关闭的。...浏览器的兼容 onunload: IE6,IE7,IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行; IE9 刷新页面 会执行,页面跳转、关闭浏览器不能执行; firefox(包括firefox3.6...) 关闭标签之后、页面跳转之后、刷新页面之后能执行,但关闭浏览器不能执行; Safari 刷新页面页面跳转之后会执行,但关闭浏览器不能执行; Opera、Chrome 任何情况都不执行。

11.6K30

监听页面一样监听戈多的动态

如果 戈戈 与 狄狄 像我们监听页面元素变化那样监听戈多的动态,是不是就不会出现空欢喜的状态?是不是就不用等得那么辛苦?是不是甚至可以主动去寻找戈多? ?...说起监听页面元素变化,那么你可知道有哪些方法可以实现这个功能?...caniuse 本来鱼头我也不知道有这属性,但是最近在工作上遇到了需要监听页面元素变动的场景,然后就了解到了这个API。 于是鱼头便看了文档,发现是个好牛逼的API。 ? 所以这到底是个啥?...:监听目标以及其后代的变化; attributeOldValue:监听目标属性变化前的具体值; characterDataOldValue:监听目标数据变化前的具体值; attributeFilter:...如何监听戈多的位置? 下面我们就通过实际的代码来监听戈多的位置变化。 效果还是如同上图。

1.6K20

JavaScript 页面可见性-监听用户离开页面-visibilitychange 事件

JavaScript监听用户离开页面-visibilitychange visibilitychange 事件触发原理 用户离开或者回到指定页面,document.visibilityState 属性发生变化...就会触发 visibilitychange 事件 因此,可以通过监听这个事件跟踪页面可见性的变化, 补充:document.visibilityState 属性 在 HTML5 中,文档对象...prerender:表示文档处于预渲染状态,即当前页面正在被预先加载并渲染,但尚未成为当前活动页面。 document.visibilityState属性是为了提高页面性能和节省资源而引入的新功能。...在过去,开发人员通常会在页面上运行许多 JavaScript 动画或视频播放等操作,这些操作会消耗大量的 CPU、GPU 或网络带宽资源,从而影响页面的性能和响应速度。...通过监视visibilityState属性,可以在用户切换选项卡或最小化窗口时暂停或恢复某些页面活动(如动画或视频播放)等操作,从而优化页面性能和用户体验。

49030
领券