当用户在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%;
}
最佳答案
您可以编写一个函数来评估 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;"
属性来消除滚动,但这会降低可用性。
关于javascript - HTML/JQuery : Textarea enlargement; Need to scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33795558/