Web谈天器材的富文本输入框

不管是粘贴文本也好，照旧图片也好，我们的输入框始终是处于聚焦（focus）状态。而当我们从心人情板里选择 emoji 心情的时辰，输入框会先失焦(blur），然后再从头聚焦。因为 document.execCommand 要领必需在输入框聚焦状态下才气触发，以是对付处理赏罚 emoji 插入来说就无法行使了。

上一末节讲过，Selection 可以让我们拿到聚焦状态下所选文本的出发点位置 startOffset 和终点位置 endOffset，假如没有选择文本而仅仅处于聚焦状态，那么这两个位置的值相称（相等于选择文本为空），也就是光标的位置。只要我们可以或许在失焦前记录下这个位置，那么就可以或许通过 range 把 emoji 插入正确的处所了。

起首编写两个器材要领。新建一个 cursorPosition.js 文件：

/**  
 * 获取光标位置  
 * @param {DOMElement} element 输入框的dom节点  
 * @return {Number} 光标位置  
 */  
export const getCursorPosition = (element) => {  
  let caretOffset = 0  
  const doc = element.ownerDocument || element.document  
  const win = doc.defaultView || doc.parentWindow  
  const sel = win.getSelection()  
  if (sel.rangeCount > 0) {  
    const range = win.getSelection().getRangeAt(0)  
    const preCaretRange = range.cloneRange()  
    preCaretRange.selectNodeContents(element)  
    preCaretRange.setEnd(range.endContainer, range.endOffset)  
    caretOffset = preCaretRange.toString().length  
  }  
  return caretOffset  
}  
/**  
 * 配置光标位置  
 * @param {DOMElement} element 输入框的dom节点  
 * @param {Number} cursorPosition 光标位置的值  
 */  
export const setCursorPosition = (element, cursorPosition) => {  
  const range = document.createRange()  
  range.setStart(element.firstChild, cursorPosition)  
  range.setEnd(element.firstChild, cursorPosition)  
  const sel = window.getSelection()  
  sel.removeAllRanges()  
  sel.addRange(range)  
} 

有了这两个要领往后，就可以放入 editor 节点内里行使了。起首在节点的 keyup 和 click 变乱里记录光标位置：

let cursorPosition = 0  
const editor = document.querySelector('.editor')  
editor.addEventListener('click', async (e) => {  
  cursorPosition = getCursorPosition(editor)  
})  
editor.addEventListener('keyup', async (e) => {  
  cursorPosition = getCursorPosition(editor)  
}) 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!