HTML/JQuery：Textarea放大;需要滾動

當用戶在textarea中輸入文本時;它會自動放大。HTML/JQuery：Textarea放大;需要滾動

現在用戶輸入冗長的文本，直到區域放大到底部。

當用戶到達頁面的底部（這是另一個靜態頁腳div），然後放大textarea;文本停止顯示並轉到頁腳後面，用戶需要滾動。

我無法粘貼整個代碼。以下是代碼片段供參考：

<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%; 
}

來源

2015-11-19 fatherazrael

可能是一個CSS問題。沒有代碼，我們永遠不會知道。創建一個片段 – mplungjan

這個標籤上有內嵌的css，它在上面的代碼片段中。 – fatherazrael

在我看來，'textarea'實際上正在擴展，但它的**'hidden' **在'footer'後面。因此，在這種情況下，將'max-height'設置爲'textarea'並保留'overflow：scroll' –

您可以編寫一個函數來評估div> textarea content &事件。我寫了一個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的&回車鍵讀取。讓我們試試這個方法來避免在textarea中滾動。

您也可以通過將屬性屬性添加爲"scroll:none;"來消除滾動，但這會降低可用性。

來源

2015-11-19 05:19:24

感謝您的回覆實際上，在這種情況下，文本上移並隱藏在textarea上方並且放入的最近文本僅顯示我面臨的問題仍然沒有得到解決 – fatherazrael

HTML/JQuery：Textarea放大;需要滾動

回答

相關問題