textarea高度跟隨文字高度而變化

html部分:

<textarea id="textarea">哈嘍哈嘍哈嘍哈嘍哈嘍哈嘍哈嘍哈嘍哈嘍哈嘍哈嘍哈嘍</textarea>


js部分:

<!--textarea高度跟隨文字高度而變化-->
 <script>
  function makeExpandingArea(el) {
   var setStyle = function(el) {
       el.style.height = 'auto';
       el.style.height = el.scrollHeight + 'px';
       // console.log(el.scrollHeight);
   }
   var delayedResize = function(el) {
       window.setTimeout(function() {
           setStyle(el)
       },
       0);
   }
   if (el.addEventListener) {
       el.addEventListener('input',function() {
           setStyle(el)
       },false);
       setStyle(el)
   } else if (el.attachEvent) {
       el.attachEvent('onpropertychange',function() {
           setStyle(el)
       });
       setStyle(el)
   }
   if (window.VBArray && window.addEventListener) { //IE9
       el.attachEvent("onkeydown",function() {
           var key = window.event.keyCode;
           if (key == 8 || key == 46) delayedResize(el);

       });
       el.attachEvent("oncut",function() {
           delayedResize(el);
       }); //處理粘貼
   }
}
makeExpandingArea(textarea);
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章