其实和之前的纯文本是一样的，只是光标的处理方式不同而已。首先，给游标添加内容需要在range对象下进行处理，使用insertNode的一个方法，注意这个方法需要传入一个node节点，纯字符需要使用createTextNode来创建Range.insertNode()-WebAPIs|MDN(mozilla.org)具体实现如下constselection=document.getSelection();constinput=function(ev){constquote=quotes[ev.data];if(quote&&(ev.inputType==="insertText"||ev.type==='compositionend')){constnewQuote=document.createTextNode(quote);constrange=selection.getRangeAt(0);range.insertNode(newQuote);}}效果如下，可以看到，插入的标点符号被自动选中，这是默认行为。那么，如何将光标定位在两者之间呢？此处可以使用setEndBefore方法来设置选择范围的终点。setEndBefore()-WebAPIs|MDN(mozilla.org)constselection=document.getSelection();constinput=function(ev){constquote=quotes[ev.data];if(quote&&(ev.inputType==="insertText"||ev.type==='compositionend')){constnewQuote=document.createTextNode(quote);constrange=selection.getRangeAt(0);range.insertNode(newQuote);范围.setEndBefore(newQuote);//将光标移动到newQuote之前}}Before的意思是“之前”，所以选择区域的终点在新生成的字符之前，光标自然会移动到两者之间的时候，我们需要处理这个问题中文引号。它还需要特殊处理。将光标向左移动一位。您可以使用setStart和setEnd方法来指示选择区域的起点。Range.setStart()-WebAPI|MDN(mozilla.org)Range.setEnd()-WebAPI|MDN（mozilla.org）的实现如下constinput=function(ev){constquote=quotes[ev.data];if(quote&&ev.inputType==="insertText"){constnewQuote=document.createTextNode(quote);constrange=selection.getRangeAt(0);constreverse=quotes_reverse.includes(ev.data);if(reverse){const{startContainer,startOffset,endContainer,endOffset}=range;range.setStart(startContainer,startOffset-1);range.setEnd(endContainer,endOffset-1);}range.insertNode(newQuote);if(reverse){range.setStartAfter(newQuote);}else{range.setEndBefore(newQuote);}}}这样的富文本还支持中英文标点符号自动配对，还有一个小细节可以优化，可以在开发者工具中看到，新增的标点符号都是独立的#text，导致整个文本分成很多小片段，打印这里的子节点都是纯文本，有没有办法合并？当然有，使用的方法是normalize，可以对子节点进行“规范化”Node.normalize()-WebAPIs|MDN(mozilla.org)constinput=function(ev){constquote=quotes[ev.data];if(quote&&ev.inputType==="insertText"){//标准化子节点range.commonAncestorContainer.normalize();}}现在看效果（注意console中的字符），只有一个打印子节点是完整的代码可以查看：contenteditable-auto-quotes(runjs.work)RunJS，前端在线创建分享-结束代码6.集成到公共方法中以上案例是针对特定元素实现的。如果有多个输入框，可能会有点麻烦。所以有必要集成和实现一个更通用的方法。首先，我们可以把事件监听器放在文档上，而不是具体的输入框document.addEventListener('compositionend',commonInput)document.addEventListener('input',commonInput)这里使用了一个commonInput来处理表单输入框和如果是富文本函数commonInput(ev){consttagName=ev.target.tagName;if(tagName==='TEXTAREA'||tagName==='INPUT'){inputTextArea.call(ev.target,ev)}else{input.call(ev.target,ev)}}注意这里要点问题，使用call指向当前编辑的输入框ev.target然后inputTextArea和input分别代表之前的表单输入和富文本的具体处理下面是完整代码，可以直接粘贴到任意控制台试用的话，相当于一个polyfill(function(){/**@desc:自动匹配标点符号*@email:yanwenbin1991@live.com*@author:XboxYan*/constquotes={"'":"'",'"':'"',"(":")","(":")","【":"】","[":"]","《": "》","「":""","『":"』,"{":"}",""":""","'":"'",""":""","'":"'",};constquotes_reverse=[""","'"];constselection=document.getSelection();函数commonInput(ev){consttagName=ev.target.tagName;if(tagName==='TEXTAREA'||tagName==='INPUT'){inputTextArea.call(ev.target,ev)}else{input.call(ev.target,ev)}}document.addEventListener('compositionend',commonInput)document.addEventListener('input',commonInput)functioninputTextArea(ev){constquote=quotes[ev.data];if(quote&&(ev.inputType==="insertText"||ev.type==='compositionend')){constreverse=quotes_reverse.includes(ev.data);if(reverse){this.setSelectionRange(this.selectionStart-1,this.selectionEnd-1)}this.setRangeText(quote)if(reverse){this.setSelectionRange(this.selectionStart+1,this.selectionEnd+1)}}}函数输入(ev){constquote=quotes[ev.data];if(quote&&ev.inputType==="insertText"){constnewQuote=document.createTextNode(quote);constrange=selection.getRangeAt(0);constreverse=quotes_reverse.includes(ev.data);if(reverse){const{startContainer,startOffset,endContainer,endOffset}=range;range.setStart(startContainer,startOffset-1);range.setEnd(endContainer,endOffset-1);}range.insertNode(newQuote);if(reverse){range.setStartAfter(newQuote);}else{range.setEndBefore(newQuote);}range.commonAncestorContainer.normalize();}}})()我们来实战看看。下面是某网站的一个评论输入框。将以上代码注入控制台后，也可以完美支持标点自动匹配。很多不常用的API，总结一下标点符号自动配对，提升输入体验。keydown事件不能区分中英文输入法，也不能区分同一个键对应的多个标点符号。input事件可以通过ev.data检测当前输入在windows操作系统下输入中文标点符号会触发两次输入，原因是和普通中文一样，在windows操作系统下触发候选框可以通过compositionend事件来实现，有效避免了触发两次的情况上面，输入时顺序出现，不可修改。如果是上引号，则在光标处插入一个下引号；如果是下引号，则将光标向前移动一位，然后在原输入框中补全上引号。您可以使用setRangeText方法在富文本输入框中手动插入内容。您可以使用insertNode方法手动插入内容。需要使用createTextNode在本机输入框中创建文本。您可以使用setSelectionRange方法手动设置选择在富文本输入框中的位置。其中，可以使用setStart和setEnd方法手动设置选择区域的位置。从整体实现来看，代码并不多，主要是DOM相关的一些API。好像有点奇怪，为什么会觉得奇怪呢？当然，我之前没有用过，这跟现在的环境有很大关系。Vue和React的框架虽然为开发者提供了很多便利，但也让他们离原生和DOM越来越远，导致很多原生API根本就没见过。这不是损失吗？最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注微信公众号前侦探