Posted By

melomano on 11/03/11


Tagged


Versions (?)

늘어나는 Textarea mobile webkit ver.


 / Published in: JavaScript
 

  1. <style>
  2. #textarea-wrap {
  3. background:#fff;
  4. position:relative;
  5. margin:20px;
  6. border:1px #DADDE0 solid;
  7. }
  8. #textarea-wrap textarea,
  9. #textarea-wrap pre {
  10. margin: 0;
  11. padding: 10px;
  12. outline: 0;
  13. border: 0;
  14. -webkit-box-sizing: border-box;
  15. -moz-box-sizing: border-box;
  16. -ms-box-sizing: border-box;
  17. box-sizing: border-box;
  18. background:transparent;
  19. display:block;
  20. font-family:sans-serif;
  21. line-height:1.4;
  22. }
  23. #textarea-wrap textarea {
  24. position:absolute;
  25. top:0;
  26. left:0;
  27. width: 100%;
  28. height:100%;
  29. resize:none;
  30. }
  31. #textarea-wrap pre {
  32. min-height:100px;
  33. visibility:hidden;
  34. }
  35. </style>
  36.  
  37. <div id='textarea-wrap'>
  38.  
  39. <textarea placeholder='Go ahead, type away...'></textarea>
  40.  
  41. <pre></pre>
  42.  
  43. </div>
  44.  
  45. <script>
  46.  
  47. var wrap = document.getElementById('textarea-wrap'),
  48. ta = wrap.getElementsByTagName('textarea')[0],
  49. pre = wrap.getElementsByTagName('pre')[0];
  50.  
  51. ta.oninput = function(e) { pre.innerHTML = e.target.value + 8 }
  52.  
  53. </script>

Report this snippet  

You need to login to post a comment.