1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Auto Resize Textarea Height using jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script>$(function(){ var textArea = $('#content'), hiddenDiv = $(document.createElement('div')), content = null; textArea.addClass('noscroll'); hiddenDiv.addClass('hiddendiv'); $(textArea).after(hiddenDiv); textArea.on('keyup', function(){ content = $(this).val(); content = content.replace(/\n/g, '<br>'); hiddenDiv.html(content + '<br class="lbr">'); $(this).css('height', hiddenDiv.height()); });});</script><style>textarea{ font-family: Arial, sans-serif; font-size: 13px; color: #444; padding: 5px;}.noscroll{ overflow: hidden; resize: none;}.hiddendiv{ display: none; white-space: pre-wrap; min-height: 50px; font-family: Arial, sans-serif; font-size: 13px; padding: 5px; word-wrap: break-word;}.lbr { line-height: 3px;}</style></head><body><div class="container"> <div class="row"> <div class="col-lg-9"> <p><h1>Auto Resize Textarea Height using jQuery</h1></p> <textarea id="content" class="form-control"></textarea> </div> </div></div></body></html> |
