gpt4 book ai didi

javascript - 在可使用 Angular 编辑的div内容中查找字符中的插入符号位置

转载 作者:行者123 更新时间:2023-11-30 15:55:26 25 4
gpt4 key购买 nike

在具有 contenteditable 属性的 div 中获取光标插入位置时遇到了一些麻烦。

实际上,我正在使用以下函数:

  onBlurArea (field, ev) {
ev.preventDefault()
const editable = ev.target.childNodes[1].childNodes[2]
this.positions[field] = {start: this.getCaretCharacterOffsetWithin(editable), editable}
}

getCaretCharacterOffsetWithin (element) {
let ie = (typeof this.doc.selection != 'undefined' && this.doc.selection.type != 'Control') && true
let w3 = (typeof this.win.getSelection != 'undefined') && true
let caretOffset = 0
if (w3) {
let range = this.win.getSelection().getRangeAt(0)
console.log(range)
let preCaretRange = range.cloneRange()
preCaretRange.selectNodeContents(element)
preCaretRange.setEnd(range.endContainer, range.endOffset)
console.log(preCaretRange)
caretOffset = preCaretRange.toString().length
console.log(caretOffset)
}
else if (ie) {
let textRange = this.doc.selection.createRange()
let preCaretTextRange = this.doc.body.createTextRange()
preCaretTextRange.expand(element)
preCaretTextRange.setEndPoint('EndToEnd', textRange)
caretOffset = preCaretTextRange.text.length
}
return caretOffset
}

当我模糊文本 Angular 场时触发 onBlurArea 函数:

<text-angular ng-model="moduleManage.currentModule.description" required ng-blur="moduleManage.onBlurArea('description', $event)"></text-angular>

此外:

this.doc = $document
this.win = $window
  • 我需要获取光标位置以添加一些不受库管理的外部内容。

  • 我的问题是,当我模糊我的领域时,如果我专注于一个精确的领域或另一个领域,我的 carretOffset 是不一样的。

  • 上面的函数总是给我0

  • 当我记录范围时,我总是有一个 div 项目完全超出了我当前的焦点,甚至超出了文本 Angular 模块

编辑:我认为我的问题在以下行:

let range = this.win.getSelection().getRangeAt(0)

这给了我一些我根本不明白的东西......

最佳答案

blur 事件被触发时,您已经失去了焦点和创建的范围。

要在 div 失去焦点之前获得插入符偏移量,我建议您在每次更改时保存插入符偏移量。也就是说,每次 keyupmouseup 被触发时或您想要更新它的任何其他时间时更新它。

检查 this plunkr

顺便说一句,在这个 plunkr 中,我使用了您的 getCaretCharacterOffsetWithin 函数来计算偏移量。但此功能可能无法按预期工作。它会在内容中添加一些空白,并且插入符号偏移量大于实际值。

关于javascript - 在可使用 Angular 编辑的div内容中查找字符中的插入符号位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38636231/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com