Web聊天工具的富文本输入框

首先编写两个工具方法。新建一个 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)  
}) 

（编辑：PHP编程网 - 湛江站长网）

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