HTML / JQuery: rozšírenie Textarea; Potrebujete posúvať - ​​javascript, jquery, html, css

Keď užívateľ zadá text v textarea; automaticky sa zväčšuje.

Teraz užívateľ zadá dlhý text, kým sa oblasť nezvýši na dno.

Keď sa používateľ dostane naspodok stránky (čo je ďalší statický päty div), potom pri zväčšovaní textarea; text sa prestane zobrazovať a prejde na zadnú stranu päty a používateľ sa musí posúvať.

Nemohol som vložiť celý kód. Nasledujúci úryvok pre referenciu:

<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>

Nasleduje obrázok obrazovky, v ktorej sa 15 skryje a objaví sa navigácia:

aktualizovať: Požadované CSS pre referencie.

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

odpovede:

Môžete napísať funkciu na vyhodnotenie obsahu div> textarea & event. Napísal som demo kód pre textarea, v ktorom ak užívateľ klikne na "enter", výška textarea sa zvýši o 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>

Táto funkcia by mohla byť ďalej vylepšená pre celkový počet znakov v textarea & enter. Vyskúšajte tento prístup, aby sme sa vyhli posunu v textarea.

Môžete odstrániť zvitok pridaním vlastnosti atribútu ako "scroll:none;" tiež zníži použiteľnosť.