防止HTML输入在溢出时移动

Question

我必须在屏幕上显示HTML元素：一个输入文本字段，以及一个隐藏输入文本字段溢出的容器。

我需要保持文本字段左侧的空间。

但是，当文本到达文本字段可见的最右边时，文本字段向左移动以显示您正在输入的内容。

如何防止这种行为？这是我的问题。 https://jsfiddle.net/531m67jw/

这是我的代码...

HTML：

<div id="container">
    <input id="textfield" type="text" />
</div>

CSS：

#container {
    width: 100px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background-color: red;
}

#textfield {
    position: absolute;
    width: 150px;
    top: 40px;
    left: 20px;
}

谢谢！

Answer 1

您可以只使用Javascript运行此代码：

var container = document.getElementById("container");
setInterval(function(){
container.scrollLeft = "0px";
}, 100);

如果希望更快，则减少毫秒数。

此外，如果您可以检测到它正在改变其位置，我很确定有一种方法可以在Javascript的每一帧之前调用一个函数，因此您可以尝试这样做。