如何获取HTML5输入字段的“字符移动距离”

Question

我正在尝试将第一个字符从输入字段中的原始位置移出多远。

背景：我正在尝试为输入字段提供语法突出显示功能。我目前正在考虑使用放置在文本下方的多色矩形来执行此操作，因此我必须考虑如何将这些矩形放置在与文本完全相同的位置。

例如，我有一个这样的输入字段，而用户输入文本。当文本长度大于宽度时，文本将向左移动。

一个例子。

<input type="text" id="listItemEditorInputDemo">

#listItemEditorInputDemo {
    width: 100;
}

当文本长度不大于输入字段宽度时

不大于：

当文本长度大于输入字段宽度时。请注意，第一个字符向后推。

更大

那么我如何获得将句子向后推多少？我想要一个纯Javascript解决方案。谢谢。

Answer 1

let listItemEditorInputDemoScrollLeft = document.getElementById(`listItemEditorInputDemo`).scrollLeft;

最适合我。 参见Element.scrollLeft。