1

我有这个 TextAreaExpander jQuery 函数工作，但我有一个小问题。

当 textarea 非常大时，使用退格键或删除按钮从其底部删除文本会导致焦点移动到 textarea 的顶部，因此光标会移出屏幕。编辑大段文本变得非常刺耳。

如何让此功能自动调整文本区域的大小，但在这种情况下不跳转并隐藏光标？

(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/

谢谢！

4

2 回答 2

0

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

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

于 2013-10-07T13:39:20.663 回答
0

这有帮助吗？

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

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

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

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>
于 2014-10-16T22:36:42.410 回答