jquery textarea调整宽度和高度

Question

我正在尝试为Firefox和Chrome创建jQuery插件，这将使textarea自动增长为高度和宽度。 This is what I have done。

HTML：

<div class="textbox"> 
    <textarea>Some Text</textarea> 
</div> 

CSS：

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; 
} 

JS：

$(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(); 
}); 

我有几个问题：

1. 每当我将ty一封信，并扩大框，只在Firefox中，我得到奇怪的闪烁。我怎样才能摆脱那种眨眼？
2. 在Chrome中，当我键入一个字母时，第一个字母向后移动，然后返回到它的位置。我怎样才能防止这一点？
3. 在Chrome中，无论何时输入一个长词，例如“Sdfsdfsdfwejhrkjsdhfsdf”，当达到最大宽度时文本都不会破坏新行，但出现一条新行。我该如何解决这个问题？

Answer 1

您可以使用CSS过渡.textbox元素，即：在transition: all 0.5s;