index.html 1.6 KB

1234567891011121314151617181920212223242526272829
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'/>
  5. <title>Simple Autosize for textareas</title>
  6. <style>
  7. textarea {
  8. padding: 10px;
  9. vertical-align: top;
  10. width: 200px;
  11. }
  12. textarea:focus {
  13. outline-style: solid;
  14. outline-width: 2px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h3>max-height 300px</h3>
  20. <textarea style='max-height: 300px'>The coconut palm (also, cocoanut), Cocos nucifera, is a member of the family Arecaceae (palm family). It is the only accepted species in the genus Cocos.[2] The term coconut can refer to the entire coconut palm, the seed, or the fruit, which, botanically, is a drupe, not a nut. The spelling cocoanut is an archaic form of the word.[3] The term is derived from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4] from the three small holes on the coconut shell that resemble human facial features.</textarea>
  21. <h3>no max-height</h3>
  22. <textarea>The coconut palm (also, cocoanut), Cocos nucifera, is a member of the family Arecaceae (palm family). It is the only accepted species in the genus Cocos.[2] The term coconut can refer to the entire coconut palm, the seed, or the fruit, which, botanically, is a drupe, not a nut. The spelling cocoanut is an archaic form of the word.[3] The term is derived from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4] from the three small holes on the coconut shell that resemble human facial features.</textarea>
  23. </body>
  24. <script src='../dist/autosize.js'></script>
  25. <script>
  26. autosize(document.querySelectorAll('textarea'));
  27. </script>
  28. </html>