Question

我的fiddle。

我有一个span，其中包含属性contenteditable，我可以插入一个值。它有placeholder使用CSS的:empty，:before和content:attr(placeholder)。

现在问题是当我尝试将值m³放在:after的值的末尾时。它可以按照我想要的方式工作，在行顶部移动并使用值的长度移动但是，当插入值时，它会使插入符号（闪烁的文本插入位置光标垂直条）出现故障。

当我说“故障”时，我的意思是它可以是隐形的，不会眨眼，或者复制视觉插入符。

移动插入符“修复”了问题，但是如果你将它移动到最后，它会再次“破坏”。

当我只按12345时（插入符号在最后但是视觉上不闪烁的一个停留在第一个和第二个字符之间）当我按下12345时，一旦左箭头显示一个和真实的插入符号在最后一个字符前闪烁。

我理解真正的插入符号未显示的问题可能是因为:after位于其上面，但我不知道为什么会出现视觉错误/重复。如何添加边距/填充以使:after向右偏移1个像素？

通过键入值来测试它，以了解问题。
使用HTML和/或CSS进行首选项修复，如果不可能，则使用Javascript。

html{
  background-color: #202020;
  color: #fff;
  font-family: consolas;
  user-select: none;
}
span{
  display: inline-block;
}
.input{
  border-bottom: 1px solid #fbbc05;
  color: #ea4335;
  cursor: text;
  margin-bottom: -5px;
  outline-style: none;
  overflow: hidden;
  white-space: nowrap;
}
.input br{
  display: none;
}
.input:empty:before{
  color: #8a190f;
  content: attr(placeholder);
}
.input:after{
  content:attr(testattr);
}

<body spellcheck="false">
  <span>Number:</span>
  <span class="input" contenteditable id="test" placeholder="865081" testattr=" m&#179"></span>
</body>

Answer 1

由于在每个浏览器中都没有发生这种情况，因此Chrome中的contentEditable属性似乎存在问题。

我很想使用标准的文本输入，相应地设置样式，看看是否能解决问题。

最终满足于占位符和措施（：之后）

1 个答案: