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

这段代码可以:

document.onkeydown = function (e) {
    e.stopPropagation();    // 阻止事件冒泡传递
    e.preventDefault();    // 阻止浏览器默认事件的发生
    // your code
    if (e.keyCode == 8) {        // 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 == 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>

原文地址:https://www.cnblogs.com/CherishTheYouth/p/CherishTheYouth_1105.html

时间: 2024-08-13 20:25:15

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

下拉滚动协议文本框展示样式(不可删除文本内容)

  <!doctype html>   <html>   <head>   <meta charset="utf-8">   <title>协议文本框展示样式</title>   <style type="text/css">       .protocol_detail_content {   width: 600px;   height: 410px;   padding: 40

javascript当文本框获得焦点设置边框

javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通过一个简单的实例介绍一下,以便需要的朋友进行扩展.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>文本框获得焦点边框变

nodejs 和web前端JavaScript什么区别

web前端javascript组成: ECMAScript,(是js的标准,js是它的具体实现和扩展,它描述语言的语法和基本对象,如:语法,运算符,语句,继承机制,数据结构以及一些内置对象) DOM(文档对象模型),描述处理网页内容的方法和接口,将整个文档document解析成dom树供用户使用js对文档进行处理. BOM(浏览器对象模型),描述可以和浏览器窗口交互的方法和接口(对象结构),如:window对象,history.location.navigator等. nodejs除了语言基础E

前端javascript模板

doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想去寻找解决方法. 可是,我,是万难不能接受这种丑陋的解决方式的.有没有优雅的解决方法呢,于是在网上搜索到了doT.js. 主页很简洁,就一个页面,研究了一下,就顺利的上手了,相当的简单易用.主要分两步走. 1.写模板 写模板,就用官方文档里

阻止按下backspace键造成页面回退相像

在IE浏览器中,会出现当你使用鼠标选中input标签或者是textarea标签,或者啥也没选中的时候,按下backspace键会触发浏览器的回退. 针对以上问题的解决思路: 1. 当按下键盘时,判断当前按键是否为backspace 2. 如果是,获取当前光标选中的元素. 3. 如果不是input或者textarea,取消backspace的关联行为 4. 如果是,则判断是否为text,password等可编辑的文本框,如果不是,则取消默认行为(此处只需要判断input,不需要判断textarea

菜鸟学前端--javascript基础

在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语法 javacript作为一种面向对象的.脚本级的轻量语言,与java一脉相承. 命名:区分大小写,弱类型定义(一般采用var,不限制类型). 行末分号可有可无(从经验上来看,推荐写,可以提高代码阅读质量). 括号用于代码段. 注释与C.java类型,单行用"//",段注释用"/

前端JavaScript面试技巧

第1章 课程简介从几个常见面试开始,讨论针对一个题目的分析思路,总结题目对应的知识点.最后列出所有 JS 知识点的集合 -- JS 知识体系框架.1-1 课程简介(导学)1-2 前言1-3 几个面试题1-4 如何搞定所有面试题 第2章 JS基础知识(上)讲解 JS 基础语法相关的面试题,分析原理以及解答方法.这一章节讲解了基础知识的第一部分:变量的类型和计算.以及JS "三座大山" -- 原型.作用域和异步中的第一座大山:原型.2-1 变量类型和计算-12-2 变量类型和计算-22-3

八大前端JavaScript趋势和工具

JavaScript的世界正在快速发展. 前端开发(和网络开发)的世界正在以极快的速度发展.如今,如果不借助前端或Webpack.React Hooks.Jest.Vue和NG元素,你会很快被远远抛下.不过,情况正在发生改变. 尽管开发人员和技术人员在前端领域中的数量逐年上升,生态系统却有标准化的趋势.新技术和工具的出现正在改变当下的规则. 总体趋势肯定会是一种基于组件构成的用户界面标准化,会影响从样式到测试甚至状态管理的所有方面,并且总体具有更好的模块度.这将包括围绕web组件.ES模块.组件

基于七牛API开发的前端JavaScript SDK

这是我们工程实践的内容,由于时间原因,具体不赘述,啊~主要还是因为懒o(╯□╰)o工程实践的题目为openedx后端管理系统的功能拓展与优化,我们要优化的一个主要功能便是实现视频本地化上传,我们采用的视频云服务商为七牛云存储,以下链接是基于它的API开发的前端JavaScript SDK,http://developer.qiniu.com/docs/v6/sdk/javascript-sdk.html我的任务是看完,找到需要改的参数,刚刚大概看了一下,很多东西不是很明白,先把我觉得需要改的参数