博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
页面屏蔽backspace键
阅读量:4053 次
发布时间:2019-05-25

本文共 1621 字,大约阅读时间需要 5 分钟。

转自:

//页面加载完成$(document).ready(function(){    //禁止退格键 作用于Firefox、Opera     document.onkeypress = banBackSpace;    //禁止退格键 作用于IE、Chrome    document.onkeydown = banBackSpace;});//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 function banBackSpace(e){	//alert(event.keyCode)    var ev = e || window.event;//获取event对象       var obj = ev.target || ev.srcElement;//获取事件源         var t = obj.type || obj.getAttribute('type');//获取事件源类型         //获取作为判断条件的事件类型     var vReadOnly = obj.readOnly;    var vDisabled = obj.disabled;    //处理undefined值情况     vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;    vDisabled = (vDisabled == undefined) ? true : vDisabled;    //当敲Backspace键时,事件源类型为密码或单行、多行文本的,      //并且readOnly属性为true或disabled属性为true的,则退格键失效      var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true);    //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效        var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea";    //判断        if (flag2 || flag1)         event.returnValue = false;//这里如果写 return false 无法实现效果 }

当我们的网页内有一个只读属性的表单时,如下:

上面的这个文本域只是用来向用户展示一些信息的,用户不能对其进行更改,所以加上了“readonly='readonly'”的只读属性,但是在IE8下面,从外观上是看不出来它和其它正常文本域的区别的,所以有的用户可能会对其进行一些删除或者添加内容的一些操作,比如当光标位于这个只读属性的文本域内时,如果用户按下了backspace(退格删除键),那么就会导致整个浏览器的后退,会让人很是郁闷,这时我们要做的就是屏蔽这个只读文本域上的一些指定的键,使用户按下这些键时不会引起浏览器的退后,刷新,或者前进等动作。

上面的代码中,onkeydown表示的是当按下按键时的意思,下面来JS函数pingbi的具体代码,也是非常简单的:

function PingBi(id){	var k=window.event.keyCode;	if(k==id){window.event.keyCode=0;window.event.returnValue=false;return false;}}

好了,这样当光标位于只读属性的文本域内时,用户按下backspace(退格删除键)时就不会引起浏览器的后退了。

转载地址:http://znxci.baihongyu.com/

你可能感兴趣的文章
JVM并发机制探讨—内存模型、内存可见性和指令重排序
查看>>
nginx+tomcat+memcached (msm)实现 session同步复制
查看>>
c++模板与泛型编程
查看>>
WAV文件解析
查看>>
WPF中PATH使用AI导出SVG的方法
查看>>
WPF UI&控件免费开源库
查看>>
QT打开项目提示no valid settings file could be found
查看>>
Win10+VS+ESP32环境搭建
查看>>
android 代码实现圆角
查看>>
flutter-解析json
查看>>
android中shader的使用
查看>>
java LinkedList与ArrayList迭代器遍历和for遍历对比
查看>>
drat中构造方法
查看>>
JavaScript的一些基础-数据类型
查看>>
转载一个webview开车指南以及实际项目中的使用
查看>>
ReactNative使用Redux例子
查看>>
Promise的基本使用
查看>>
coursesa课程 Python 3 programming 统计文件有多少单词
查看>>
coursesa课程 Python 3 programming 输出每一行句子的第三个单词
查看>>
Returning a value from a function
查看>>