Jquery中奇怪的按键行为答案

【问题标题】：Curious Keydown Behavior in JqueryJquery中奇怪的按键行为
【发布时间】：2012-10-10 01:42:30
【问题描述】：

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

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/

【问题讨论】：

标签： jquery html css contenteditable

【解决方案1】：

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

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

【讨论】：

对，但是使用 keyup，如果用户按住一个键而不释放它，它将跳到新行，但容器 div 不会相应地调整大小，直到他们释放他们的键。似乎是一个不完整的解决方案。有什么办法可以在按住键的同时改变大小？也许是 keyup 和 keydown 的某种组合？
真正的解决方案是使用input事件，但我认为jQuery不支持它
@CamdenReslink：尝试keypress 事件，每次插入字符时都会触发（即按住键时每次重复）。我不认为退格可以可靠地检查是否使用此事件，因此您可能需要单独检查。另见：quirksmode.org/js/keys.html