javascript - HTML/JQuery : Textarea enlargement; Need to scroll

Question

当用户在textarea中输入文字时；它自动放大。

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

当用户到达页面底部(这是另一个静态页脚 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>

此功能可以进一步增强，用于文本区域和输入键读取的总字符数。让我们试试这种方法来避免在文本区域中滚动。

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