javascript - CSS - Hiding text that overlaps with textarea -


so have html code here, creates textarea , nice rectangle text 'html' @ top-right of textarea. fiddle.

<div id="html_text"><h5 style=" margin-top: 17px; margin-left: 400px; position: fixed; color: black; z-index: 1; font-family: arial, helvetica, sans-serif; border-style: solid; border-width: thin; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 3px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">html</h5></div>  <textarea rows="20" style=" margin-left: 20px; font-family: 'courier new', courier, monospace; height: 280px; width: 460px; resize: none; overflow: scroll; overflow-x: hidden; position: absolute; z-index: 0;" id="html_code" spellcheck="false"></textarea> 

however, want make such when user has long string of text obstructs rectangle, rectangle becomes hidden. how can that? best if answer in javascript / jquery.

you can count number of characters, , hide div when text coming close it, , show again if text deleted:

jquery:

$('#html_code').keyup(function () {    var count = $(this).val().length;      if(count > 52) {         $('#html_text').hide();     }      else {         $('#html_text').show();     }  }); 

note: note may change count-number (52) if changing width of textarea, font, font-size or else makes font different now.

demo


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -