您好，我有这个自动扩展文本区域 jquery 代码，目前，除了 Google Chrome 之外，它正在以某种方式工作。
问题是当我将样式 padding:3px 添加到文本区域时，每当我在框中输入内容时，它都会扩展高度。如果我删除样式填充，它会很好地工作。
测试在这里：（使用Google Chrome进行测试）
(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 ) {
$("#msg").html(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)
.bind("input", ResizeTextarea);
}
});
return this;
};
})(jQuery);
$(document).ready( function( ) {
$("#message").TextAreaExpander(40);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
.textfield {
padding:3px 3px;
width:98%;
}
</style>
<textarea id="message" class="expand textfield"></textarea>
<div id="msg"></div>
我一直在试图找出原因，如果有人能在这里提供一些线索，我将不胜感激。
我建议你使用这个插件：
http://plugins.jquery.com/project/TextAreaResizer http://plugins.jquery.com/project/TextAreaResizer
StackOverflow 在其文本区域中使用此插件！我还需要多说吗？
希望这可以帮助。干杯
PS：或者，你可以使用自动增长插件 http://javascriptly.com/examples/jquery-grab-bag/autogrow-textarea.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
