JavaScript屏蔽Backspace键
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript屏蔽Backspace键相关的知识，希望对你有一定的参考价值。
当使用readonly="readonly"属性将文本框设置成只读<input type="text" readonly="readonly"/>时会出现一个问题，如果光标进入只读文本框，然后按下Backspace键，就会跳转到上一个页面，效果就像点击了浏览器的后退按钮返回前一个页面一样，使用户体验大打折扣。为了解决这个问题，可在页面添加如下处理方法，如果文本框是只读的，那么就禁用Backspace键。
代码如下：
<script type="text/javascript"> //处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外 function banBackSpace(e){ var ev = e || window.event;//获取有效event对象 var obj = ev.target || ev.srcElement;//获取事件源 var t = obj.type || obj.getAttribute(‘type‘);//获取事件源类型 //获取作为判断条件的事件类型 var vReadOnly = obj.getAttribute(‘readonly‘);//IE为true,Chrome为‘readonly‘ //alert("vReadOnly="+vReadOnly); //处理null值情况 vReadOnly = (vReadOnly == "") ? false : vReadOnly; //当敲Backspace键时，事件源类型为密码或单行、多行文本的， //并且readonly属性为true或enabled属性为false的，则退格键失效 var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") && (vReadOnly||vReadOnly=="readonly"))?true:false; //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效 var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") ?true:false; //alert("vReadOnly="+vReadOnly+",flag1="+flag1+",flag2="+flag2); //判断 if(flag2){ return false; } if(flag1){ return false; } } window.onload=function(){ //禁止后退键 作用于Firefox、Opera //document.onkeypress=banBackSpace; //禁止后退键 作用于IE、Chrome document.onkeydown=banBackSpace; } function clickEvent(e){ alert("e="+e+",window.event="+window.event); var ev = "" || window.event;//“”、null、undefined alert("ev="+ev); } </script> <body> 可读写文本框：<input type="text" value="123"></br></br> 只读文本框：<input type="text" value="123" readonly="readonly"></br></br> <button type="button" name="btn" onclick="clickEvent()">按钮</button> </body>
补充：
1、readonly属性在各浏览器中的区别：
IE浏览器：可以获得焦点，光标可进入，但不能输入。获得焦点时按下Backpace键，页面会后退跳转。
Firefox浏览器：可获得焦点，光标可进入，但不能输入。获得焦点时按下Backpace键，不起任何作用。
Chrome浏览器：可以获得焦点，光标不可进入。
2、采用disable属性，在各浏览器中均为：光标不可进入。用户体验更好些。只要有disabled关键字即有效，可以不赋值，甚至赋值为空或false都表示disabled有效。
<input type="text" name="email" disabled="disabled">
若要切换input的可编辑状态，在javascript中写如下代码。注意用的attr()方法，不是prop()方法。
$(‘input‘).attr("disabled", false);//可编辑
$(‘input‘).attr("disabled", true);//不编辑
另外还需特别注意的是，采用disable属性设置为不可编辑后，表单提交不会自动提交到后台，action中通过setter/getter方法是取不到值的。
以上是关于JavaScript屏蔽Backspace键的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript学习总结(二十二)——JavaScript屏蔽Backspace键