js 修改backspace事件

最近在做项目时,有个需求需要改写键盘的backspace事件。

首先是一个可编辑的div,div中含有标签(li,li为空标签)也还有文字。

需求问题:

1、删除文字时,不能删除前面的空标签。

2、标签可以直接删除。

此处需要重写键盘的backspace事件。代码如下:

$(document).on("keydown","#txtEditerBox",function (e) {
    if(e.keyCode === 8){
        var selection = window.getSelection();
        var range = selection.getRangeAt(0);
        // 当 光标 集合到 一点 时, range的文档内容为空,需要 重新指定  选择前一个节点的最后一个文本为删除的range文档
        if(range.collapsed){
            if(range.startOffset===0){
                //range.setStart(range.startContainer.nextElementSibling);
                //range.setStartOffset(range.startContainer.length);
                range.start = range.startContainer.previousElementSibling;
                var id = range.start ? range.start.id:"";
                $(".c-textarea").find("#"+id).remove();
                //range.startOffset = range.startContainer.length;
            }else{
                range.setStartOffset(range.startOffset  - 1);
                range.startOffset = range.startOffset  - 1;
            }
        }
         console.log(range);
        // 删除当前 Range 对象表示的文档区域。
         range.deleteContents();
         e.preventDefault();
         e.stopPropagation();
    }
});
时间: 2024-12-21 21:34:56

js 修改backspace事件的相关文章

js修改onclick事件的四种方法

第一种:button.onclick = Function("alert('hello');"); 第二种:button.onclick = function(){alert("hello"); }; 第三种:button.onclick = myAlert; function myAlert(){                     alert("hello");              } 第四种: 这种情况更加动态,更为实用,而且还能

js中的事件,内置对象,正则表达式

[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按下去触发 keypress: 键盘按下并松开的瞬间触发 keyup: 键盘抬起时触发 [注意事项:(了解)] ① 执行顺序: keydown--keypress--keyup ② 长按时,会循环不断的执行keydown-keypress ③ 有keydown事件,不一定有keyup事件(事件触发过程

js捕获activex事件

最近参与了一个项目,我的同事在开发一个ActiveX对象,我帮他编写JS脚本来调用这个对象,其中碰到蛮多问题,最难的就是如何响应由ActiveX对象返回的对象事件.正好,现在一起总结一下. 首先,我来介绍一下COM组件,以便说明js如何响应 COM组件        方法:                     void init()                    //初始化对象                  Project createProject()        //创建一

php开发之js修改页面css样式

在我以前的印象里,页面的字体属性,背景,等样式在页面加载后基本上都是固定的了,但是今天看到可以通过js修改页面的样式,觉得有必要和大家分享下. test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi

Js监听键盘事件

表单提交的时候大多数用户都习惯用回车键来进行提交,页面接受回车键的处理如下: if(navigator.userAgent.indexOf("MSIE")>0) {   //IE document.onkeydown=function(){ if(13 == event.keyCode){ alert('browser is ie and enter key down'); } } }else{   //非IE window.onkeydown=function(){ if(13

从零开始的JS生活(二)——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

JS中的事件以及DOM 操作

[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document.getElementById("div1")  通过ID获取唯一的节点  多个同名ID只会取到第一个 2 getElmentsName   通过Name取到一个数组,包含1到多个节点   使用方式   通过循环,取到每一个节点  循环次数从0开始,<数组 length [查看和设置属

第十五篇 JS 移入移出事件 模拟一个二级菜单

JS 移入移出事件 模拟一个二级菜单 老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,onmouseout是移出事件.当然还有其他的事件效果,这里就先不说明了. 先直接上一段代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <