前端javascript如何阻止按下退格键页面回退 但 不阻止文本框使用退格键删除文本

时间：2023-11-28 10:44:02

这段代码可以：

document.onkeydown = function (e) {

    e.stopPropagation();    // 阻止事件冒泡传递

    e.preventDefault();    // 阻止浏览器默认事件的发生

    // your code

    if (e.keyCode == ) {        // keyCode == 8 表示按下的回退按钮

    }

}

下面更正一下，上面的写法有一个比较严重的问题：

这种写法虽然屏蔽了回车键页面回退的功能，但同样，如果该页面有文本输入框，那么这个输入框将不能使用 退格键 进行文本删除；

下面给出一种网上搜索的 既能屏蔽页面退格键回退 ，又不屏蔽 退格键删除 功能的代码，感谢网上盆友的分享，因为有好几个博客都能找到同一段代码，所以无法确定谁是原创：

<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 ==  && (t == "password" || t == "text" || t == "textarea") && (vReadOnly == true || vDisabled == true);

            //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效

            var flag2 = ev.keyCode ==  && !(t == "password" && t == "text" && t == "textarea");

            //判断

            if (flag2 || flag1) return false;

        }

        //禁止后退键 作用于Firefox、Opera

        document.onkeypress = forbidBackSpace;

        //禁止后退键  作用于IE、Chrome

        document.onkeydown = forbidBackSpace;

</script>

相关文章