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

これにより、ボックスは水平方向のサイズ変更で正しく変更されますが、行をスキップしてサイズを変更する必要がある場合は、必要以上に1文字入力する必要があります。キープレスを使用しても同じ結果が得られ、キーを離すまでキーアップのサイズは変更されないため、ユーザーがキーを押している場合、ユーザーがキーを離すまで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 に答える