Question

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

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

我在DIV中用css position：absolute附加一个textbox元素。当我使用javascript将文本框放置在DIV边界的边缘附近时，一些文本框将隐藏在div的边界之外，这样可以正常工作。但是当我在其中输入文本并且文本超过div的边界时，它会自动滚动div以便可以看到整个文本框。这是不受欢迎的行为。无论如何都要阻止这种情况。

JSFiddle：http://jsfiddle.net/Rnj27/

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

Answer 1

您可以使用jQuery .focus来实现此目的：

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

我更新了您的fiddle。看看吧。

Answer 2

我将您的<input>代码更改为：

<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会给你一点调整大小的故障。但是你可以选择合适的尺寸，这样它就不会调整大小..希望它有所帮助..

使用溢出停止DIV：在剪切文本框时隐藏滚动

2 个答案: