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