jQuery Mobile 文本域调整大小问题

Question

jQuery Mobile 文本域调整大小问题

jquerycssjquery-mobile

3

我有一个textarea元素，它位于页面的页脚（模拟iOS中消息原生撰写框）。随着文本的输入，它会相应地增长或缩小。该元素的高度似乎被计算为52像素。

我希望高度更小。然而，设置初始高度（没有important）只会被52px覆盖。将初始高度设置为约35px（使用important）会禁用自动增长功能，并出现滚动条。我已经尝试了Web检查器，但似乎无法找出这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;
}

Height is 52px. Ideally, I would like it to be around 35px. The auto-grow feature should look like this.

- geekchic

你能提供一个 jsfiddle 吗？ - marionebl

你能否无论如何发布它？差异通常很有帮助，你的其余代码也可能提供提示。 - marionebl

好的，jquery-mobile在textarea元素上做了一些疯狂的事情，需要进一步检查。文档：http://api.jquerymobile.com/textinput/ - marionebl

我明白。这看起来很简单，但我却要为此花费大量时间。不过还是感谢@marionebl的帮助！ - geekchic

你想要成长吗？还是固定它的高度？ - Omar

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- marionebl · Accepted Answer

您的问题源于jQuery Mobile源代码中的此行。在计算自动调整大小的jquery mobile textarea表单小部件的新高度时，它会添加15px到计算出的高度中。

这是硬编码的，因此无法进行调整。

您可以通过文本输入小部件的Monkey Patch解决此问题。它需要执行两件事：

添加一个用于添加高度的默认选项，例如autogrowSpace
覆盖$.mobile.widgets.textinput中的私有函数_updateHeight，使用此新选项

使用讨论过的Monkey Patch的工作jsfiddle： http://jsfiddle.net/marionebl/48c7x/2/ 示例 _updateHeight从jQuery移动源中复制：

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