以编程方式设置的值未键入时跨度溢出答案

【问题标题】：Span overflow when value set programmatically not typed以编程方式设置的值未键入时跨度溢出
【发布时间】：2017-08-20 20:52:24
【问题描述】：

我在输入字段的顶部创建了一个跨度，主要是为了操纵输入文本的样式 (fiddle)。

只要不超出输入框边框，它就可以很好地工作，否则会发生这种情况：

现在，我了解到您可以具有与跨度输入相同的滚动效果，如下所示：

    white-space: nowrap;
    overflow: hidden;

但是，由于我没有直接输入 span，而只是更新了 innerHTML，所以这没有任何效果。

有没有办法可以更新跨度，所以它会将更新视为打字？

【问题讨论】：

您不只是对输入文本本身进行样式设置有什么特别的原因吗？我在这里错过了什么吗？ =)
我希望这是可能的，但你不能像那样只改变部分文本的颜色..（或者我不知道有什么办法）
啊……我明白了。你想要一半的文字一种颜色，另一种颜色……明白了。嗯...有趣。
如何使用段落和内容可编辑？
Contenteditable 也是一个想法，但我不知道如果这是你所暗示的，你可以用一个段落来设置它的一部分

标签： javascript jquery html css

【解决方案1】：

您可以在键入时在跨度上设置scrollLeft 非常高的属性来模拟相同的效果。您还需要在输入和跨度上显式设置相同的宽度。

你可以看到一个有效的Fiddle here。

我制作了一个“假”跨度，隐藏且宽度可变，因此我可以使用它来将 scrollLeft 属性设置为文本正常运行时的宽度。

为了处理“光标移动”事件，我检查光标位置 (via @RenatoPrado)，并将 scrollLeft 设置为文本宽度的百分比。所以它几乎就像一个真正的input 字段一样工作，但它仍然不完美。这只会在keyup 上触发（keydown 不能很好地工作），所以它有一个“滞后”。而且你看不到闪烁的光标，这很烦人。但希望这能让您走上正轨。

【讨论】：

scrollLeft 的属性是什么？
你是什么意思？
10000 代表什么？
这只是一个“真正的高”值，以确保跨度滚动到最右边。当然这并不理想，但获取输入文本的宽度并非易事，正如我们所说，我正在研究一个更优雅的解决方案。
我明白了，只要你输入它就很好用，但是，是的，只要你用光标拖动文本就会搞砸