Javascript 如何防止自定义光标移动字母？

我已经为一个div创建了一个自定义CSS光标。我正在尝试让它像其他标准光标一样显示。这是99%的工作，但当我在字母之间移动光标移动其他字母。我确信它可以用绝对定位来固定，但我想出来的任何东西似乎都不正确。任何帮助都将不胜感激

$next-btn.clickfunction{ var text=$text.text； console.logtext； var n=text.indexOf |； text=text.替换|； text=text.slice0，n+1+'|'+text.slicen+1； $text.replaceWith+text+； }; 正文{ display：内联； 字号：1.8em； 字母间距：.05em； } 开始 终止 光标{ 填充：0； 保证金：0； } 光标{ -webkit动画：闪烁1.5s无限； 动画：闪烁1.5s无限； 字体大小：粗体； 字体大小：1.2米； } @-webkit关键帧闪烁{ 0%, 49.9%, 100% { 不透明度：0； } 50%, 99.9% { 不透明度：1； } } 演示 H|ello world 下一个

可能是这样的：

letter-spacing: -10px;

在光标上？

只需使用

position:absolute;
margin:-4px

---

在游标元素上。这将从文档流中删除它。根据评论更新，很好。

最好的解决方案可能是使用字母间距和边距。 使用position:absolute可能会使用一些额外的css，但可能会删除沿字符串移动的字符串

根据Roko C.Buljan的建议进行编辑，谢谢您的改进

  letter-spacing: -1em;
  margin: 0 4px 0 -4px;

$next-btn.clickfunction{ var text=$text.text； console.logtext； var n=text.indexOf |； text=text.替换|； text=text.slice0，n+1+'|'+text.slicen+1； $text.replaceWith+text+； }; 正文{ display：内联； 字号：1.8em； 字母间距：.05em； } 开始 终止 光标{ 填充：0； 保证金：0； 左边距：-6px； 位置：绝对位置； 宽度：9px； 溢出：隐藏； } 光标{ -webkit动画：闪烁1.5s无限； 动画：闪烁1.5s无限； 字体大小：粗体； 字体大小：1.2米； } @-webkit关键帧闪烁{ 0%, 49.9%, 100% { 不透明度：0； } 50%, 99.9% { 不透明度：1； } } 演示 H|ello world 下一个

---

我会选择一种不同的方法来处理光标：使用一个透明的左边框，该边框会被动画间歇性地变成黑色。这需要首先将文本拆分为以跨距包装的字符，然后将.cursor类应用于相应的字符：

var=0； $'text'.html+$'text'.text.split.join+； $'next-btn'。单击，函数{ var$characters=$'text'。子项； var cursorIndex=$characters.filter'.cursor'.index； 如果cursorIndex==-1 $characters.eq0.addClass'cursor'； 其他的 $characters.removeClass'cursor'.eqcursorIndex+1.addClass'cursor'； }; 正文{ display：内联； 字号：1.8em； 字母间距：.005em； } 文本跨度{ 左边框：.1em实心透明； } 文本span.cursor{ -webkit动画：闪烁1.5s无限； 动画：闪烁1.5s无限； } @-webkit关键帧闪烁{ 0%, 49.9%, 100% { 边框颜色：黑色； } 50%, 99.9% { 边框颜色：透明； } } 你好，世界 下一个

---

只需添加到您的答案中：并使用边距：-4px；要设置/调整适当的位置，请反转不透明度逻辑…是。不使用position:relative，只需使用：margin:04px 0-4px；。下面是一个演示，它具有更好的不透明度：