我有一个textarea元素位于页面的页脚中(模拟iOS中消息的本机撰写框)。输入文本后,它会相应地增大或缩小。这个元素的高度似乎计算为52px。
我希望身高更小。但是,设置初始高度(不重要)只会被52px覆盖。将初始高度设置为大约35px(重要)会禁用自动增长功能,而是会出现滚动条。我玩网络检查员,但我似乎无法弄清楚这个52px的计算位置。
这个问题的解决方案是什么?代码很简单。我正在使用jQuery 1.10.2和jQuery Mobile 1.4.0。
HTML
<div data-role="footer" data-theme="a" data-position="fixed" data-tap-toggle="false" class="custom-footer">
<div class="group-footer">
<div class="map-icon">
<img src="assets/compose-action-arrow@2x.png" style="width: 25px;height: 25px;" />
</div>
<div class="text-box">
<textarea name="textarea" class="define-textarea" id="inbox-continue-conversation"></textarea>
</div>
<div class="send-link"><a href="#" id="inbox-continue-answer-button">Send</a>
</div>
</div>
</div>
CSS
.define-textarea {
font-size: 1em !important;
border-color: #cccccc !important;
border-radius: 5px;
}
答案 0 :(得分:6)
您的问题源于jQuery移动源中的this line。在计算自动调整jquery移动textarea
表单小部件的新高度时,它会将15px添加到计算的高度。
这是硬编码的,所以没有选择在这里进行调整。
你可以使用textinput小部件的猴子补丁来解决这个问题。它必须做两件事:
autogrowSpace
_updateHeight
中的私人功能$.mobile.widgets.textinput
以使用此新选项使用讨论过的猴子补丁工作jsfiddle :
http://jsfiddle.net/marionebl/48c7x/2/
从jQuery mobile source复制的 示例 _updateHeight
:
(function ($, undefined) {
$.widget("mobile.textinput", $.mobile.textinput, {
options: {
autogrow:true,
autogrowSpace: 0,
keyupTimeoutBuffer: 100
},
_updateHeight: function () {
var paddingTop, paddingBottom, paddingHeight, scrollHeight, clientHeight,
borderTop, borderBottom, borderHeight, height,
scrollTop = this.window.scrollTop();
this.keyupTimeout = 0;
// IE8 textareas have the onpage property - others do not
if (!("onpage" in this.element[0])) {
this.element.css({
"height": 0,
"min-height": 0,
"max-height": 0
});
}
scrollHeight = this.element[0].scrollHeight;
clientHeight = this.element[0].clientHeight;
borderTop = parseFloat(this.element.css("border-top-width"));
borderBottom = parseFloat(this.element.css("border-bottom-width"));
borderHeight = borderTop + borderBottom;
height = scrollHeight + borderHeight + this.options.autogrowSpace;
if (clientHeight === 0) {
paddingTop = parseFloat(this.element.css("padding-top"));
paddingBottom = parseFloat(this.element.css("padding-bottom"));
paddingHeight = paddingTop + paddingBottom;
height += paddingHeight;
}
this.element.css({
"height": height,
"min-height": "",
"max-height": ""
});
this.window.scrollTop(scrollTop);
},
});
})(jQuery);