js 短信模板

因为使用了 contenteditable 属性，旧版 ie 慎用

短信模板的难点，一个文本框中模板内容禁止修改和删除，只能修改指定的部分

思路：使用 contenteditable属性，将div变成可以编辑的div，div中不可以修改的元素用 contenteditable = false 代表不可以更改（删除的话就会整体删掉 -> 想看效果的话可以先将 js 代码注释掉）

　　　但这并不满足我们的需求，我们不能修改和删除，所以我们定义了全局的下标变量去控制，拿到不可以修改元素的下标，每次修改内容的时候，也需要重新拿一次下标，这样我们去掉内容的

　　　时候，去掉整体不可以修改内容（利用了 contenteditable = false）这样我们只需要根据下标，在指定下标的位置拼接上该内容就可以了

提醒：初始的时候就要获取并改掉下标 initIndex()

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div{
                width: 300px;
                height: 150px;
                border: 1px solid #ddd;
                padding: 10px;
            }    
        </style>
    </head>
    <body>
        <div id="div" contenteditable="true" oninput="fn">
            <span id="a" contenteditable="false"> 这个咱不能编辑啊 1  </span>
            可编辑内容~
            <span id="b" contenteditable="false"> 这个咱不能编辑啊 2  </span>
            可编辑内容~
        </div>
    </body>
</html>
<script type="text/javascript">
    var div = document.getElementById("div")
    var num = 0;  // id a 的下标
    var num1 = 0; 
    function initIndex() {
        let str = div.innerHTML.replace(/\n\t\t\t/g, '');
        let aa = document.getElementById('a');
        let bb = document.getElementById('b');
        let arr;
        let arr1;
        if(aa){ // 如果  id a 存在 就以 id a 进行分组，拿到 id a 的下标
            arr = str.split('<span id="a"'); 
        }
        if(bb){
            // 注意，这里的str不可以新声明变量，防止获取的下标不一样
            arr1 = str.split('<span id="b"');
        }
        num = arr[0].length; 
        num1 = arr1[0].length;
    }
    initIndex();
    div.oninput=function(e){
        let str = e.target.innerHTML; // div 里面的内容修改都需要用这个变量，
        str = str.replace(/\n\t\t\t/g, '')
        let aa = document.getElementById('a');
        let bb = document.getElementById('b');
        let arr;
        let arr1;
        
        if(aa){ // 如果  id a 存在 就以 id a 进行分组，拿到 id a 的下标
            arr = str.split('<span id="a"'); 
        }
        else {
            str = str.slice(0, num) + '<span id="a" contenteditable="false"> 这个咱不能编辑啊 1  </span>' + str.slice(num);
            arr = str.split('<span id="a"');
            div.innerHTML = str;
        }
        if(bb){
            // 注意，这里的str不可以新声明变量，防止获取的下标不一样
            arr1 = str.split('<span id="b"');
        }
        else {
            str = str.slice(0, num1) + '<span id="b" contenteditable="false"> 这个咱不能编辑啊 2  </span>' + str.slice(num1);
            arr1 = str.split('<span id="b"');
            div.innerHTML = str;
        }
        num = arr[0].length;  // 每次 html 处理完都将下标重新赋值
        num1 = arr1[0].length;
    }
</script>

posted on 2022-01-24 14:05 Web引领者阅读(133) 评论(0) 编辑收藏举报