因为使用了 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>