JS根據文本域內容-動態調整高度

期望:文本域(textarea)根據內容字符數量,動態調整高度,防止打印或預覽時顯示滾動條與內容顯示不完整

• Html文本域綁定獲取焦點事件(onfocus)

  <textarea class="textarea-none-border" rows="10" cols="130" id="measures" name="measures" onfocus="autoTextarea(this)"></textarea>
  

• Js動態調整高度函數

  /**
   * 文本框根據輸入內容自適應高度
   * @param                {HTMLElement}        輸入框元素
   * @param                {Number}                設置光標與輸入框保持的距離(默認0)
   * @param                {Number}                設置最大高度(可選)
   */
  var autoTextarea = function (elem, extra, maxHeight) {
      extra = extra || 0;
      var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
          isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
          addEvent = function (type, callback) {
              elem.addEventListener ?
                  elem.addEventListener(type, callback, false) :
                  elem.attachEvent('on' + type, callback);
          },
          getStyle = elem.currentStyle ? function (name) {
              var val = elem.currentStyle[name];
              if (name === 'height' && val.search(/px/i) !== 1) {
                  var rect = elem.getBoundingClientRect();
                  return rect.bottom - rect.top -
                      parseFloat(getStyle('paddingTop')) -
                      parseFloat(getStyle('paddingBottom')) + 'px';
              };
              return val;
          } : function (name) {
              return getComputedStyle(elem, null)[name];
          },
          minHeight = parseFloat(getStyle('height'));
      elem.style.resize = 'none';
      var change = function () {
          var scrollTop, height,
              padding = 0,
              style = elem.style;
          if (elem._length === elem.value.length) return;
          elem._length = elem.value.length;
          if (!isFirefox && !isOpera) {
              padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
          };
          scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
          elem.style.height = minHeight + 'px';
          if (elem.scrollHeight > minHeight) {
              if (maxHeight && elem.scrollHeight > maxHeight) {
                  height = maxHeight;
                  style.overflowY = 'auto';
              } else {
                  height = elem.scrollHeight;
                  style.overflowY = 'hidden';
              };
              style.height = height + extra + 'px';
              // scrollTop += parseInt(style.height) - elem.currHeight;
              // document.body.scrollTop = scrollTop;
              // document.documentElement.scrollTop = scrollTop;
              elem.currHeight = parseInt(style.height);
          };
      };
      addEvent('propertychange', change);
      addEvent('input', change);
      addEvent('focus', change);
      change();
  };
  

• 數據回顯時調用

  $('#measures').html(ifrData.measures);//安全措施
  autoTextarea(document.getElementById("measures"));
  

• 最終效果