如何根据文本大小自动调整文本框的大小而不滚动 [英] How to resize textbox automatically according to text size without scrolling
问题描述
我根据从数据库中检索的文本增长大小自动调整asp.net文本框的大小。
问题是直到我滚动或按回车键，文本框不会调整大小。任何想法或暗示解决这个问题将不胜感激。谢谢你
我尝试过：
1.控制声明：
Hi,
I have a problem on resizing the asp.net textbox automatically according to text growing size which is retrieve from database.
Problem is Until i scroll or press the enter key the textbox wont resize. Any idea or hint to fixed this issue will be greatly appreciated.Thank you
What I have tried:
1. Control declaration:
<asp:TextBox ID="txtrez" runat="server" width="100%" CssClass="img-responsive center" Text='<%# Eval("imgtext") %>' TextMode="MultiLine" style="resize:none;overflow:hidden; text-align:center" ReadOnly="True" onkeyup="AutoExpand(this)" Rows="2" BorderStyle="None"></asp:TextBox>
2. JavaScript函数：
< script type =text / javascript >
有趣ction AutoExpand（txtbox）{
txtbox.style.height =1px;
txtbox.style.height =（25+ txtbox.scrollHeight）+px;
}
< / script>
2. JavaScript function:
<script type="text/javascript">
function AutoExpand(txtbox) {
txtbox.style.height = "1px";
txtbox.style.height = (25+ txtbox.scrollHeight) + "px";
}
</script>
推荐答案
这是最简单的样本
Here is the simplest sample
<html>
<head>
<title>Adaptive input width sample</title>
<style type="text/css">
#meter { visibility: hidden; padding-left: 1em;
font-family: serif; font-size: 12pt; border: thick solid; }
input { padding-left: 0.5em; font-family: serif; font-size: 12pt; }
</style>
</head>
<body>
<input id="test" type="text"/><span id="meter"/>
<script>
setWidthSync(
document.getElementById("test"),
document.getElementById("meter"));
function setWidthSync(target, meter) {
var adjustWidth = function() {
meter.innerHTML = target.value;
target.style.width = meter.offsetWidth;
};
adjustWidth();
target.onkeydown = function() { adjustWidth(); };
target.onkeyup = function() { adjustWidth(); };
} //setWidthSync
</script>
</body>
</html>
这个想法是：你正在使用隐藏元素米（ span ，在我的示例中）来测量同一文本的实际宽度。由于元素的样式不同，结果可能会略微不准确，因此它们应该通过CSS样式保持接近，并为米元素提供足够的填充值。
此外，此示例显示一些闪烁，因为首先渲染已修改的文本，然后仅调整输入的宽度。此外，如果用户在一行中输入多个空白字符，则不能精确计算宽度，因为在HTML渲染中，这些序列总是呈现为一个空白空间。我将为您的家庭练习留下改进的代码。我希望你有这个主意。 :-)
The idea is: you are using the hidden element meter (span, in my example) to measure actual width of the same text. The results can be slightly inaccurate due to different styles of the elements, so they should be kept close, via CSS style, with enough padding value for the meter element.
Also, this sample shows some flicker, because the modified text is rendered first, and only then the width of input is adjusted. Besides, the width is not accurately calculated, if a user inputs several blank space character in a row, because in HTML rendering such sequences are always rendered as one blank space. I'll leave improving this code for your home exercise. I hope you got the idea. :-)
这篇关于如何根据文本大小自动调整文本框的大小而不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
