zoukankan      html  css  js  c++  java
  • textarea 高度自适应

    一、
    $('textarea').keyup(function () { $(this).height(this.scrollHeight); });
    效果一般

    二、
    https://github.com/alexdunphy/flexText

    <div class="flex-text-wrap">
      <pre>
        <span></span>
        <br>
        <br>
      </pre>
      <textarea id="content" placeholder="Type/paste/shout content…"></textarea>
    </div>

    .flex-text-wrap {
        position: relative;
    
        *zoom: 1;
    }
    
    textarea,
    .flex-text-wrap {
        outline: 0;
        margin: 0;
        border: none;
        padding: 0;
    
        *padding-bottom: 0 !important;
    }
    
    .flex-text-wrap textarea,
    .flex-text-wrap pre {
        white-space: pre-wrap;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    
        *white-space: pre;
        *word-wrap: break-word;
    }
    
    .flex-text-wrap textarea {
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        resize: none;
    
        /* IE7 box-sizing fudge factor */
        *height: 94%;
        *width: 94%;
    }
    
    .flex-text-wrap pre {
        display: block;
        visibility: hidden;
    }
    
    textarea,
    .flex-text-wrap pre {
        /*
         * Add custom styling here
         * Ensure that typography, padding, border-width (and optionally min-height) are identical across textarea & pre
         */
    }
    ;(function ($) {
    
        // Constructor
        function FT(elem) {
            this.$textarea = $(elem);
    
            this._init();
        }
    
        FT.prototype = {
            _init: function () {
                var _this = this;
    
                // Insert wrapper elem & pre/span for textarea mirroring
                this.$textarea.wrap('<div class="flex-text-wrap" />').before('<pre><span /><br /><br /></pre>');
    
                this.$span = this.$textarea.prev().find('span');
    
                // Add input event listeners
                // * input for modern browsers
                // * propertychange for IE 7 & 8
                // * keyup for IE >= 9: catches keyboard-triggered undos/cuts/deletes
                // * change for IE >= 9: catches mouse-triggered undos/cuts/deletions (when textarea loses focus)
                this.$textarea.on('input propertychange keyup change', function () {
                    _this._mirror();
                });
    
                // jQuery val() strips carriage return chars by default (see http://api.jquery.com/val/)
                // This causes issues in IE7, but a valHook can be used to preserve these chars
                $.valHooks.textarea = {
                    get: function (elem) {
                        return elem.value.replace(/
    ?
    /g, "
    ");
                    }
                };
    
                // Mirror contents once on init
                this._mirror();
            }
    
            // Mirror pre/span & textarea contents
            ,_mirror: function () {
                this.$span.text(this.$textarea.val());
            }
        };
    
        // jQuery plugin wrapper
        $.fn.flexText = function () {
            return this.each(function () {
                // Check if already instantiated on this elem
                if (!$.data(this, 'flexText')) {
                    // Instantiate & store elem + string
                    $.data(this, 'flexText', new FT(this));
                }
            });
        };
    
    })(jQuery);

    调用:

    $(function () {
        $('textarea').flexText();
    });
     
  • 相关阅读:
    UOJ425【集训队作业2018】strings【分块,常数优化】
    UOJ444【集训队作业2018】二分图【构造,结论】
    各种类型转换为字符串类型(ToString())
    ADO.net数据绑定
    关于扫雷游戏学习笔记(二)
    关于扫雷游戏学习笔记(一)
    Luogu P2864 [USACO06JAN]树林The Grove(bfs)
    Luogu P1712 [NOI2016]区间(线段树)
    Luogu P2051 [AHOI2009]中国象棋(dp)
    Luogu P2577 [ZJOI2005]午餐(dp)
  • 原文地址:https://www.cnblogs.com/jymz/p/6847911.html
Copyright © 2011-2022 走看看