动态增加文本框高度？ [英] Dynamically increasing textbox height?

问题描述

可能存在重复：

自动调整大小Textarea

大家好，我正在努力解决问题，它在哪里。我试图做的是动态改变一个输入框的高度，当用户的文本溢出它的宽度（类似Facebook的状态更新文本框）。

你输入一个简短的更新，如果文本比文本框长，它会创建一个新行。我尝试使用textarea，但无论出于何种原因，默认情况下都不会强制它为1行。

任何人都知道这样做的简单方法吗？ ：

解决方案

您可以手动控制 textarea 的大小CSS高度和宽度参数通过将一个按键事件绑定到 textarea ，您可以获得框中的文本数量并相应地调整高度。例如，下面是一些jQuery将为您输入的每50个字符添加20像素的高度。

 < script type = text / javascriptsrc =http://code.jquery.com/jquery-latest.min.js> 
< / script> 
 
< textarea id = textboxstyle =height：20px; width：400px;>< / textarea> 
 
< script type =text / javascript> 
 $（document）。 ready（function（）{
 $（＃textbox）。val（''）; 
 $（＃textbox）.presspress（function（）{
 var textLength = $ （#textbox）。val（）。length; 
 if（textLength％50 == 0）{
 var height = textLength / 50; 
 $（＃textbox）。 CSS（ '高度'， 20+（身高* 20））; 
} 
}）; 
}）; 
< / script> 
  

您可以调整这些值以获得所需的效果。

Possible Duplicate:
Autosizing Textarea

Hello all, I am trying to solve a problem and getting absolutely no where with it. What I am trying to do is dynamically change the height of an inputbox when the users text overflows it's width (sorta like Facebook's status update textbox).

You enter a brief update, and if the text is longer than the textbox, it creates a new row. I tried using a textarea, but for whatever reason cannot force it to be exactly 1 row by default.

Anyone know an easy way of doing this? :(

解决方案

You can manually control the size of the textarea using the CSS height and width parameters. By binding a keypress event to the textarea, you can get the amount of text in the box and adjust the height accordingly. For example, here's some jQuery that will add 20 pixels to the height of the box for every 50 characters you put in:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<textarea id="textbox" style="height:20px;width:400px;"></textarea>

<script type="text/javascript">
$(document).ready(function() {
    $("#textbox").val('');
    $("#textbox").keypress(function() {
        var textLength = $("#textbox").val().length;
        if (textLength % 50 == 0) {
            var height = textLength/50;
            $("#textbox").css('height', 20+(height*20));
        }
    });
});
</script>

You can tweak the values to get the desired effect.

这篇关于动态增加文本框高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！