Home  >  Article  >  Web Front-end  >  How to disable the browser's backspace key in JS

How to disable the browser's backspace key in JS

不言
不言Original
2018-07-11 17:48:191412browse

This article mainly introduces how to disable the browser's backspace key in JS. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

We are developing real projects JS is often used to disable some keys on the keyboard, such as the backspace key (backspace/back key). In a project, I encountered the backspace key being disabled when editing the page, because the backspace key was disabled. The space key will cause the page to regress, and the edited content will be lost, which is very disgusting. ok, stop talking nonsense and get straight to the code.

  <script type="text/javascript">
        //处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外
        function forbidBackSpace(e) {
            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) return false;
        }
        //禁止后退键 作用于Firefox、Opera
        document.onkeypress = forbidBackSpace;
        //禁止后退键  作用于IE、Chrome
        document.onkeydown = forbidBackSpace;
</script>

How to use: Put the above js code between and it will be ok

The above is the entire content of this article, I hope it will be helpful to everyone's learning For help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

How to use Vue.js with ajax to bind data

How to use JS to implement a simple digital clock

The above is the detailed content of How to disable the browser's backspace key in JS. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn