Html Stop DIV with overflow：当文本框被剪裁时，隐藏以防止滚动

我有一个DIV，重要的是css溢出：hidden

<div style="width:800px;height:400px;overflow:hidden;border:1px solid black;position:relative;"></div>

我在DIV中附加了一个textbox元素，并使用css position:absolute。当我使用javascript将文本框放置在DIV边界的边缘附近时，一些文本框将隐藏在DIV边界之外，这很好。但是当我在其中输入文本，文本经过div的边界时，它会自动滚动div，这样就可以看到整个文本框。这是不受欢迎的行为。有没有办法防止这种情况发生

JSFiddle：

我在里面加了一个红方块，所以你可以看到DIV确实在滚动。只需在教科书中输入文本，直到文本越过边界。

我将您的

代码更改为：

<input type="text" size="14" 
style="max-width:100px;height:20px;
border:1px solid black;position:absolute;left:700px;top:200px;"></input>

---

棘手的部分是使用

size

和

max width

，仅使用

max width

会给您带来一些调整大小的小问题。但是，您可以选择正确的大小，这样它就不会调整大小。。希望能有帮助

您可以使用jQuery

.focus

来实现这一点：

$("#txtBox").focus(function(){
    $(this).closest("#parentDiv").toggleClass("focused");
});

---

我更新了你的密码。请看一看。

@user3168736已使用JSFIDLE更新