Javascript jquery textarea可调整宽度和高度

我正在尝试为Firefox和Chrome创建jQuery插件，使

textarea

的高度和宽度都自动增长。

HTML:

JS:

$（函数（）{
$.fn.textbox=函数（选项）{
选项=选项| |{}；
var maxWidth=options.maxWidth | |$（窗口）.width（），
maxHeight=options.maxHeight | |$（窗口）.height（）；
这个。每个（函数（）{
var elem=$（此），
克隆=$（“”）。附加到（“正文”），
textarea=元素查找（“textarea”），
content=“”；
函数setMaxSize（）{
var-widthSpace=elem.outerWidth（true）-elem.width（）；
var heightSpace=elem.outerHeight（true）-elem.height（）；
var newMax={
“最大宽度”：最大宽度-宽度空间，
“最大高度”：最大高度-高度空间
};
元素css（newMax）；
clone.css（newMax）；
}
函数调整（）{
clone.css({
“字体系列”：textarea.css（“字体系列”），
“字体大小”：textarea.css（“字体大小”）
});
content=textarea.val（）。替换（/\n/g，
）；
如果（内容==“”）{
content=“”；
}
html（内容）；
元素css({
高度：clone.height（），
宽度：clone.width（）+5
});
}
textarea.on（“键控”，调整）；
setMaxSize（）；
调整（）；
});
};
$（“.textbox”）.textbox（）；
});

我有几个问题：

每当我键入一封信并展开框时，只有在Firefox中我才会奇怪地眨眼。我怎样才能摆脱那种眨眼呢

在Chrome中，当我键入一个字母时，第一个字母会向后移动，然后返回到它的位置。我怎样才能防止这种情况

在Chrome中，每当我键入一个长单词“sdfsdfwejhrkjsdhfsdf”时，当达到最大宽度时，文本不会断开一条新行，而是会出现一条新行。如何修复此行为

---

您可以在

.textbox

元素上使用css转换，即：

转换：全部0.5s
我不认为这能解决问题，你能用我的JSFIDLE告诉我怎么做吗？FF中闪烁的问题是因为文本的某些部分跳转到另一行，然后在调整大小后返回。我建议您首先调整长方体的大小。
<div class="textbox">
    <textarea>Some Text</textarea>
</div>

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.textbox {
    position: absolute;
    border: 4px dashed #CCCCCC;
    min-width: 30px;
    padding: 8px;
}


.textbox textarea {
    background: transparent;
    padding: 0;
    margin: 0;
    resize: none;
    font-family: Arial, sans-serif;
    font-size: 60px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    white-space: nowrap;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

$(function() {
    $.fn.textbox = function(options) {
        options = options || {};

        var maxWidth = options.maxWidth || $(window).width(),
            maxHeight = options.maxHeight || $(window).height();

        this.each(function() {
            var elem = $(this),
                clone = $("<div class='hiddendiv'></div>").appendTo("body"),
                textarea = elem.find("textarea"),
                content = "";

            function setMaxSize() {
                var widthSpace = elem.outerWidth(true) - elem.width();
                var heightSpace = elem.outerHeight(true) - elem.height();
                var newMax = {
                    "max-width": maxWidth - widthSpace,
                    "max-height": maxHeight - heightSpace
                };

                elem.css(newMax);
                clone.css(newMax);
            }

            function adjust() {
                clone.css({
                    "font-family": textarea.css("font-family"),
                    "font-size": textarea.css("font-size")
                });

                content = textarea.val().replace(/\n/g, '<br>&nbsp;');
                if (content === "") {
                    content = "&nbsp;";
                }

                clone.html(content);

                elem.css({
                    height: clone.height(),
                    width: clone.width() + 5
                });
            }
            textarea.on("keyup", adjust);

            setMaxSize();
            adjust();

        });
    };

    $(".textbox").textbox();
});