当以编程方式未键入值时，跨度溢出

Question

我在输入字段的顶部创建了一个span，基本上是为了操纵输入文本的样式（fiddle）。

只要您不输入输入框边框，它就会很有效，或者发生这种情况：

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

    white-space: nowrap;
    overflow: hidden;

但是，由于我没有直接输入跨度，只是更新innerHTML，这没有任何效果。

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

Answer 1

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

您可以看到有效的Fiddle here。

我做了一个＆＃34;假的＆＃34; span，hidden和可变宽度，因此我可以使用它将scrollLeft属性设置为文本在正常行为时的宽度。

处理＆＃34;光标移动＆＃34;事件，我检查光标位置（via @RenatoPrado），并将scrollLeft设置为文本宽度的百分比。所以它的工作方式几乎就像一个真正的input字段，但它仍然不完美。这只会在keyup上触发（keydown工作不太好），所以它有一个＆＃34;滞后＆＃34;。而且你无法看到闪烁的光标，这让人讨厌。但希望这能让你走上正轨。