针对ie在input为readonly时选中点击backspace键会返回上一页的情况

最新推荐文章于 2026-04-28 05:23:27 发布

原创最新推荐文章于 2026-04-28 05:23:27 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#backspace #回退 #禁止回退 #禁止返回上级

bug处理专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要讨论了在Internet Explorer浏览器中，当input元素设置为readonly时，用户按下backspace键会意外触发返回上一页的问题。作者提供了代码解决方案，以防止这种行为发生，确保在输入框内删除功能可用的同时，避免浏览器的默认回退操作。

可以设置这个给input unselectable="on   或者用js

document.onkeydown =function(e){
            var ev = e || window.event; //获取event对象
            if (ev.keyCode == 8) {
                var obj = ev.target || ev.srcElement; //获取事件源
                var t = obj.type || obj.getAttribute('type'); //获取事件源类型
                //获取作为判断条件的事件类型
                var vReadOnly = obj.getAttribute('readonly') || obj.readOnly;
                if ((t == "password" || t == "text" || t == "textarea"|| t == "email"|| t == "url"|| t == "number"|| t == "range"|| t == "Date"|| t == "search"|| t == "color") && (vReadOnly == true)) {
                    return false;
                }
            }
        };

上述针对页面中输入时删除可用，但空白地方点击依然会触发浏览器自带返回上一页

如果你想完全去除浏览器的这个自带backspace返回上一页功能用下面的代码

 document.onkeydown =function (e) {
            var ev = e || window.event; //获取event对象
            if (ev.keyCode == 8) {
                var obj = ev.target || ev.srcElement; //获取事件源
                var t = obj.type || obj.getAttribute('type'); //获取事件源类型
                //获取作为判断条件的事件类型
                var vReadOnly = obj.getAttribute('readonly') || obj.readOnly;
                var vdisabled = obj.getAttribute('disabled') || obj.disabled;
                 var flag1 = ((t == "password" || t == "text" || t == "textarea"|| t == "email"|| t == "url"|| t == "number"|| t == "range"|| t == "Date"|| t == "search"|| t == "color") && (vReadOnly == true || vdisabled == true)) ? true : false;
                var flag2 = (t != "password" && t != "text" && t != "textarea"&& t != "email"&&t != "url"&& t != "number"&& t != "range"&& t != "Date"&& t != "search"&& t != "color") ? true : false;
                //判断
                if (flag1 || flag2) {
                    return false;
                }
            }
        };