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.
Comments
Post a Comment