HTML / JQuery：文本区域扩大； 需要滚动

Question

当用户在文本区域输入文本时； 它会自动放大。

现在，用户输入冗长的文本，直到区域扩大到底部。

当用户到达页面底部（另一个静态页脚div）时，则扩大文本区域； 文本停止显示，并转到页脚的后部，用户需要滚动。

我无法粘贴整个代码。 以下是供参考的摘要：

<div class="ionTabs" style="width: 100%; margin-right: auto; margin-left: auto;" >

<! -- There is huge piece of code here using IONTABS... In one of Tab we have following textarea  -->

 <textarea id="financeComments" style="overflow: hidden; width: 90%; resize: none; height: 20px; "></textarea>

</div>
<!-- The textarea in above div get expand and enters into following footer after which we are unable to view text and need to scroll down   -->

<div class="footer economySubmit">
  Footer Data
</div>    

以下是问题的屏幕截图，其中有15个隐藏并且滚动出现：

更新 ：必需的CSS供参考。

.footer {
 background: #f1f1f1 none repeat scroll 0 0;
 border-top: 1px solid #ddd;
 bottom: 0;
 height: 43px;
 left: 0;
 padding: 10px;
 position: fixed;
 width: 100%;
 }

Answer 1

您可以编写一个函数来评估div> textarea内容和事件。 我已经为textarea编写了一个演示代码，其中如果用户单击“ enter”，则textarea的高度将增加5px。

<script>
    $('textarea').keyup(
    function(event){
        var t = $(this).val();
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
            $(this).height($(this).height()+5);
        }       
    });
</script>

此功能可以进一步增强，以增加文本区域中的字符总数并输入回车键。 让我们尝试这种方法以避免在textarea中滚动。

您可以通过将属性属性添加为"scroll:none;"来消除滚动 也可以，但这会降低可用性。