この TextAreaExpander jQuery 関数は機能していますが、小さな問題が 1 つあります。
テキストエリアが非常に大きい場合、バックスペースまたは削除ボタンを使用してテキストエリアの下部からテキストを削除すると、フォーカスがテキストエリアの上部に移動するため、カーソルが画面外に移動します。テキストの大部分を編集するのは非常に不快です。
この関数でテキストエリアのサイズを自動変更するにはどうすればよいですか。ただし、その状況でカーソルをジャンプして非表示にすることはありません。
(function($) {
// jQuery plugin definition
$.fn.TextAreaExpander = function(minHeight, maxHeight) {
var hCheck = !($.browser.msie || $.browser.opera);
// resize a textarea
function ResizeTextarea(e) {
// event or initialize element?
e = e.target || e;
// find content length and box width
var vlen = e.value.length, ewidth = e.offsetWidth;
if (vlen != e.valLength || ewidth != e.boxWidth) {
if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = '0px';
var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));
e.style.overflow = (e.scrollHeight > h ? 'auto' : 'hidden');
e.style.height = h + 'px';
e.valLength = vlen;
e.boxWidth = ewidth;
}
return true;
};
// initialize
this.each(function() {
// is a textarea?
if (this.nodeName.toLowerCase() != 'textarea') return;
// set height restrictions
var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);
// initial resize
ResizeTextarea(this);
// zero vertical padding and add events
if (!this.Initialized) {
this.Initialized = true;
$(this).css('padding-top', 0).css('padding-bottom', 0);
$(this).bind('keyup', ResizeTextarea).bind('focus', ResizeTextarea);
}
});
return this;
};
})(jQuery);
// initialize all expanding textareas
jQuery(document).ready(function() {
jQuery('textarea[class*=expand]').TextAreaExpander();
});
テキストエリアの一番下からテキストを削除すると、ここで問題を確認できます: http://jsfiddle.net/BmwCe/1/
ありがとう！