Question

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

当textarea非常大时，使用退格键或删除按钮从其底部删除文本会导致焦点移动到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();
});

您可以通过删除textarea最底部的文字来查看此问题： http://jsfiddle.net/BmwCe/1/

谢谢！

Answer 1

结束找到更好的功能而不是上面的功能。它似乎没有另一个问题。

您可以在此处找到详细信息： Auto resizing textarea link down jquery

Answer 2

这有用吗？

有没有人认为满足？滚动没有搞乱，我喜欢的唯一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>

jQuery问题和自动调整textarea大小

2 个答案: