Question

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

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/

Answer 1

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

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

Jquery中的好奇Keydown行为

1 个答案: