Advanced Search

늘어나는 Textarea mobile webkit ver.

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.