jqueryは、微信入力ボックスのような入力チャットボックスを実現する
1761 ワード
最近、チャットページを切るときには、微信のようなチャット入力ボックスを実現する必要があります.すなわち、入力ボックスの高さはコンテンツの増加に伴って増加します.
ネット上の考え方を総合するとkeyupで判断することがありますが、この方法は一度に大量のテキストを入力するときに問題があるようで、削除するときにも問題があるようです.もう一つはタイマーで解決することです.ユーザのフォーカスが入力ボックスにある場合、一定時間おきに入力ボックス内のテキストの実際の高さをチェックし、実際の高さが入力ボックスの高さより大きいと、入力ボックスの高さをテキストの実際の高さと一致させる.私のコードは2つ目を採用しています.
ネット上の考え方を総合するとkeyupで判断することがありますが、この方法は一度に大量のテキストを入力するときに問題があるようで、削除するときにも問題があるようです.もう一つはタイマーで解決することです.ユーザのフォーカスが入力ボックスにある場合、一定時間おきに入力ボックス内のテキストの実際の高さをチェックし、実際の高さが入力ボックスの高さより大きいと、入力ボックスの高さをテキストの実際の高さと一致させる.私のコードは2つ目を採用しています.
$(function () {
/* */
function keepHeight() {
var newHeight = $('.div-textarea')[0].scrollHeight;
$('.div').height(newHeight);
}
/* */
var liaotoan = setInterval(keepHeight, 1);
/* */
$('.div-textarea').on('click', function () {
liaotoan = setInterval(keepHeight, 1);
});
/* */
$('.div-textarea').on('blur', function () {
clearInterval(liaotoan);
});
});