jQuery Mobile textarea调整大小问题

Question

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

我想高度要小一些。但是，设置初始高度（不重要）只会被52px覆盖。将初始高度设置为大约35像素（重要）会禁用自动增长功能，而会出现滚动条。我已经与网络督察玩过，但我似乎无法弄清楚这个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; 
} 

Answer 1

您的问题从jQuery Mobile的源this line茎。在计算自动调整jquery mobile textarea窗体小部件的新高度时，它会将15px添加到计算出的高度。

这是硬编码，所以没有选项来调整这里。

你可以用textinput小部件的猴子补丁来解决这个问题。它必须做两件事：

1. 为增加的高度添加默认选项，例如， autogrowSpace
2. 覆盖私有函数_updateHeight在$.mobile.widgets.textinput在使用这个新选项

工作的jsfiddle采用讨论猴补丁：

http://jsfiddle.net/marionebl/48c7x/2/

例_updateHeight从jQuery mobile source复制：

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