html - How to attach div to bottom of textarea using jquery -
i can have multiple html textarea boxes on web page , when textarea receives focus, i'd display (or create) div underneath it. when focus leaves want hide (or destroy) div. when different textarea receives focus want same thing occur. few details:
- the textareas can variety of widths , heights
- the div attached underside of textarea fixed , unchanging, 200px width , 40px high. won't change regardless of height/width of textarea above it.
- the user doesn't need interact div, , in fact shouldn't. displaying "x of xx characters used" or similar. it's display only, contents of div continuously change user types. (hopefully won't remove focus text area , hide div)
- only 1 "div-underneath-textarea" ever visible @ time. means 1 div need exist. , can created on fly if that's easiest.
- div should created when textarea receives focus.
- div should destroyed when textarea loses focus.
- contents of div must change each time key pressed.
- the div needs precisely anchored underneath textara.
what straightforward way achieve jquery? i'm thinking dynamically created (and later destroyed) div ideal, unless it's problematic reason.
i need dynamic div creation/destruction upon focus/blur, , anchoring of div underside of textarea.
thanks in advance.
you can use insertafter()
insert div after textarea on focusin
. on focusout
can remove div. i'm not sure want happen when content of div must change each time key pressed. if want display content of textarea can use keyup function , display text or something. if specify want happen better can better out. said can following:
//inserts div under textarea $('textarea').on('focusin', function(){ $('<div class="added-div">added div</div>').insertafter(this); }); //removes added div , clears textarea $('textarea').on('focusout', function(){ $('.added-div').remove(); $(this).val(''); }); //updates added div textarea content $('textarea').keyup(function () { var textareacontent = $(this).val(); $('.added-div').html(textareacontent); });
textarea{ display:block; margin:10px 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea></textarea> <textarea></textarea> <textarea></textarea> <textarea></textarea>
Comments
Post a Comment