zoukankan      html  css  js  c++  java
  • 文本域的高度自适应


    <textarea maxlength="100" class="text" data-adaptheight rows="3" cols="40" placeholder="Your input"
    style="padding: 16px; line-height: 1.5;"></textarea>
    <script>
    (function () {
    function adjustHeight(el, minHeight) {
    var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
    var diff = outerHeight - el.clientHeight;
    el.style.height = 0;
    el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
    }
    var textAreas1 = document.getElementsByClassName('text');
    for(var i = 0; i< textAreas1.length; i++) {
    foo([textAreas1[i]]);
    }
    function foo(textAreas){
    for (var i = 0, l = textAreas.length; i < l; i++) {
    var el = textAreas[i];
    el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
    el.style.overflowY = 'hidden';
    var minHeight = el.scrollHeight;
    el.addEventListener('input', function () {
    adjustHeight(el, minHeight);
    });
    window.addEventListener('resize', function () {
    adjustHeight(el, minHeight);
    });
    adjustHeight(el, minHeight);
    }};
    }());
    </script>
  • 相关阅读:
    iOS 实现多个按钮,点选一个其它都取消选中状态的最佳方法
    iOS隐藏导航条1px的底部横线
    ios url 编码和解码
    ClassLoader
    Java多线程
    Tomcat8-启动脚本分析
    Cmd
    java命令
    Http报文
    断点续传原理
  • 原文地址:https://www.cnblogs.com/dream0530/p/5664426.html
Copyright © 2011-2022 走看看