3

所以我有一个像这样创建的“光标”对象：

var cursor=document.createElement('span');
cursor.id="currentCursor";
cursor.innerHTML="|";
cursor.style.fontWeight="bold";
cursor.style.position = 'absolute';
cursor.style.marginLeft="-1px";

然后我将它添加到有人点击的页面：

var selection = window.getSelection();
var currentRange = selection.getRangeAt(0);
currentRange.insertNode(cursor);

我遇到的问题是在某些地方（主要是行尾），如果添加了光标对象，它会在对象之前创建一个换行符。使用 insertNode 将其移动到另一个区域会删除换行符。此外，如果我将显示设置为“无”，请等待几秒钟，然后将其设置回“内联”，则删除换行符。

这似乎可能是添加绝对元素的浏览器错误，但我想知道是否有人有解决方法。我尝试将宽度设置为 0px，但没有效果。

更新 所以如果我将光标更改为

cursor.style.position = 'static';

它没有随机换行符。但是，这会导致在元素周围创建空间。有什么办法不允许元素在它们周围创造空间？

更新 2

添加了一个小提琴来显示问题： http: //jsfiddle.net/Mctittles/pSg2D/1/ 原始代码有点大，但我对其进行了精简以突出这个问题。

如果您单击笑脸的末尾然后键入它会导致第 33 行触发创建一个新的文本节点。输入几个字母后，您会看到光标对象被强制到下一行。单击其他位置以移动它会使线条再次合并。

如果您取消注释第 38 和 40 行，您将看到我所说的最初显示：无并稍后更改它。这一次它不会导致换行。

我为提琴手取出了一些跨浏览器代码，所以这可能只适用于 Chrome

4

2 回答 2

1

但是 [ position:static] 会导致在元素周围创建空间。

不，它不会导致它 - 没有“围绕它”创建实际空间，它只是一个字符的显示宽度加上使用的字体中的间距，这使得 span 元素本身的宽度大于|字符本身。但是当你绝对定位元素时，你不会注意到，因为它是从流中取出的，所以它不会将后面的字符推到右边。

我的解决方法建议：不要将 span 作为 innerHTML放入|，而是将其留空 - 然后通过给元素 a 来实现该行border-left:1px solid。删除position:absolute，使其默认为static。

那么你可能不喜欢你的光标得到的高度——但这也可以通过设置display来修复inline-block，并给它一个height。

在这里，看看你喜欢什么苹果：http: //jsfiddle.net/pSg2D/9/

于 2013-10-15T21:48:32.860 回答
0

您应该改用 CSS。使用 z-index 甚至可能 float 会（至少应该）解决这个问题。 编辑：始终确保没有其他样式使其断线！

于 2013-10-13T11:01:49.377 回答