当前位置:Gxlcms > JavaScript > JavaScript实现屏蔽Backspace键的案例

JavaScript实现屏蔽Backspace键的案例

时间:2021-07-01 10:21:17 帮助过:6人阅读

今天在IE浏览器下发现,当把使用readonly="readonly"属性将文本框设置成只读<input type="text" readonly="readonly"/>时有一个奇怪的问题:如果光标进入只读文本框,然后按下Backspace键,就会跳转到上一个页面,效果就像点击了浏览器的后退按钮返回前一个页面一样,而在火狐和google下没有这样的问题出现,为了解决这个问题,写了一个如下的处理方法,如果文本框是只读的,那么就禁用Backspace键。

代码如下:

  加上这样的处理之后,就可以解决"只读输入框在IE下按下Backspace键回退到前一个页面的问题了"

ps:用JS屏蔽backspace(退格删除)键或某一个指定键的完美代码

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

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

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

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

以上就是JavaScript实现屏蔽Backspace键的案例的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行