网站特效

【笔记】两种方式让textarea实现高度自适应(不出现滚动条)

1.js实现

<!DOCTYPE html>
<html>
 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文本框根据输入内容自适应高度</title>
    <style type="text/css">
      h2 {
        text-align: center;
        margin: 50px auto;
      }
      
      #textarea {
        display: block;
        margin: 0 auto;
        overflow: hidden;
        width: 550px;
        font-size: 14px;
        height: 18px;
        line-height: 24px;
        padding: 2px;
      }
      
      textarea {
        outline: 0 none;
        border-color: rgba(82, 168, 236, 0.8);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
      }
    </style>
    <script>
      /**
       * 文本框根据输入内容自适应高度
       * @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 - padding;
              style.overflowY = 'auto';
            } else {
              height = elem.scrollHeight - padding;
              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();
      };
    </script>
    <script async src="http://c.cnzz.com/core.php"></script>
  </head>
 
  <body>
    <h2>文本框根据输入内容自适应高度</h2>
    <textarea id="textarea" placeholder="回复内容"></textarea>
    <script>
      var text = document.getElementById("textarea");
      autoTextarea(text); // 调用
    </script>
  </body>
 
</html>

2.div模拟textarea文本域轻松实现高度自适应

方法一:div模拟textarea文本域轻松实现高度自适应
<!doctype html>
<html lang="en">
 
  <head>
    <meta charset="UTF-8">
    <title>div模拟textarea文本域轻松实现高度自适应</title>
    <style>
      h2 {
        text-align: center;
        margin: 50px auto;
      }
      
      .test_box {
        width: 400px;
        min-height: 20px;
        /*设置最小高度*/
        max-height: 1000px;
        /*设置最大高度超过300px时出现滚动条*/
        _height: 120px;
        margin-left: auto;
        margin-right: auto;
        padding: 13px;
        outline: 0;
        border: 1px solid #a0b3d6;
        font-size: 16px;
        line-height: 24px;
        word-wrap: break-word;
        overflow-x: hidden;
        overflow-y: auto;
        border-color: rgba(82, 168, 236, 0.8);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
      }
    </style>
 
  </head>
 
  <body>
    <h2>div模拟textarea文本域轻松实现高度自适应</h2>
    <div class="test_box" contenteditable="true">
      <br />
    </div>
  </body>
 
</html>

 

【笔记】两种方式让textarea实现高度自适应(不出现滚动条)已关闭评论
Avatar photo

人生长恨水长东