Question

如何使用jQuery对其内容（如在Facebook中）进行<textarea>自动调整大小。

Answer 1

查看此演示：http://jqueryui.com/demos/resizable/#textarea

Answer 2

    <script type="text/javascript">

    function adjustTextarea(this_){

    var value_ = this_.value;

    value_ = value_.replace(new RegExp("\n\r", 'gi'), "\n");
    value_ = value_.replace(new RegExp("\r", 'gi'), "\n");

    var split_ = value_.split("\n");
    this_.rows = split_.length;

    return;
    }

    </script>

    <textarea cols="100" style="overflow:hidden;" onkeyup="adjustTextarea(this);" onfocus="adjustTextarea(this);" >
    Text
    </textarea>

Answer 3

使用来自http://james.padolsey.com/javascript/jquery-plugin-autoresize/

的James Padolsey autoResize jquery插件

基本用法

    $('textarea#comment').autoResize({
        // On resize:
        onResize : function() {
        $(this).css({opacity:0.8});
        },
        // After resize:
        animateCallback : function() {
        $(this).css({opacity:1});
        },
        // Quite slow animation:
        animateDuration : 300,
        // More extra space:
        extraSpace : 40
    });

Answer 4

超轻量：

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

textarea在jquery中自动调整大小

4 个答案: