0

我正在尝试创建一个文本框，该文本框可水平调整大小，可拖动，并根据内部输入的内容动态更改其高度。到目前为止，这是我的代码

HTML：

<div id="text_container">
    <div id="my_text" contenteditable="true"></div>
</div>

CSS：

#text_container {
    border: #4A4A4A 2px solid;
    background: #EFEFEF;
    width: 150px;
    padding: 5px;
}

#my_text {
    width: 100%;
    border: #000 1px solid;
    background: #fff;  
    font-size: 40px;
}

jQuery：

$('#text_container').resizable( { handles: 'e' } ).draggable();

$('#my_text').keydown( function() {
    $('#text_container').css( { height: ($( this ).height() + 2) } );
});

$('#text_container').resize( function() {
    $('#text_container').css( { height: ($( '#my_text' ).height() + 2) } );
});

这使得框随着水平调整大小而正确改变，但是当我需要通过向下跳过一行来调整它的大小时，我必须输入一个比我应该输入的字符更多的字符。使用 keypress 会产生相同的结果，并且 keyup 在释放键之前不会调整大小，因此如果一个人按住某个键，它不会调整 div 的大小，直到该人释放该键，这似乎不是最佳的大部头书。对此有什么想法吗？

这是一个小提琴： http: //jsfiddle.net/UA3QS/65/ ​ ​</p>

4

1 回答 1

1

输入值未设置为 中的新值keydown。您可以改用该keyup事件：

$('#my_text').keyup( function() {
    $('#text_container').css( { height: ($(this).height() + 2) });
});
于 2012-10-10T01:49:45.817 回答