jQuery 和自动调整 textarea 的问题答案

【问题标题】：Issue with jQuery and auto-resizing textareajQuery 和自动调整 textarea 的问题
【发布时间】：2014-10-17 06:36:42
【问题描述】：

我可以使用这个 TextAreaExpander jQuery 函数，但我遇到了一个小问题。

当文本区域非常大时，使用退格或删除按钮从其底部删除文本会导致焦点移动到文本区域的顶部，因此光标会移出屏幕。编辑大段文字会让人很不爽。

如何让这个函数自动调整文本区域的大小，但在这种情况下不跳转和隐藏光标？

(function($) {
    // jQuery plugin definition
    $.fn.TextAreaExpander = function(minHeight, maxHeight) {
        var hCheck = !($.browser.msie || $.browser.opera);
        // resize a textarea
        function ResizeTextarea(e) {
            // event or initialize element?
            e = e.target || e;
            // find content length and box width
            var vlen = e.value.length, ewidth = e.offsetWidth;
            if (vlen != e.valLength || ewidth != e.boxWidth) {
                if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = '0px';
                var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));
                e.style.overflow = (e.scrollHeight > h ? 'auto' : 'hidden');
                e.style.height = h + 'px';
                e.valLength = vlen;
                e.boxWidth = ewidth;
            }
            return true;
        };
        // initialize
        this.each(function() {
            // is a textarea?
            if (this.nodeName.toLowerCase() != 'textarea') return;
            // set height restrictions
            var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
            this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
            this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);
            // initial resize
            ResizeTextarea(this);
            // zero vertical padding and add events
            if (!this.Initialized) {
                this.Initialized = true;
                $(this).css('padding-top', 0).css('padding-bottom', 0);
                $(this).bind('keyup', ResizeTextarea).bind('focus', ResizeTextarea);
            }
        });
        return this;
    };
})(jQuery);
// initialize all expanding textareas
jQuery(document).ready(function() {
    jQuery('textarea[class*=expand]').TextAreaExpander();
});

您可以通过从文本区域的最底部删除文本来查看问题： http://jsfiddle.net/BmwCe/1/

谢谢！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

最终找到了一个更好的函数来代替上面的函数。它似乎没有其他任何问题。

你可以在这里找到它的详细信息： Auto resizing textarea link down jquery

【讨论】：

【解决方案2】：

这有帮助吗？

有没有人认为 contenteditable？滚动不会乱七八糟，我唯一喜欢它的 JS 是如果您打算将数据保存在模糊上……显然，它在所有流行的浏览器上都兼容：http://caniuse.com/#feat=contenteditable

只需将其设置为看起来像一个文本框，它会自动调整大小...使其最小高度和行高成为首选文本高度并拥有它。

这种方法的好处在于您可以在某些浏览器上保存和标记。

http://jsfiddle.net/gbutiri/v31o8xfo/

<style>
.autoheight {
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    outline: none;
    width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
    var $this = $(this);
    // The text is here. Do whatever you want with it.
    console.log($this.html());
});

</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey <b>Mouse</b></div>

【讨论】：