[英]textarea readonly auto height (that fills with selected dates)
我使用MultiDatesPicker日歷,用戶可以在其中選擇一些日期。 一個文本區域(帶有只讀標簽)對象自動填充了日期,而用戶選擇了其中的一些並可以正常工作。 我現在想做的是使textarea的高度等於其中文本的高度(來自Multidatespicker的日期)。 從1行開始。
我嘗試了這個答案(第二個答案), 創建具有自動調整大小的textarea (工作方式: jsfiddle ),但不適用於我的情況
的HTML
<div class="pick-multi-dates"></div>
<textarea rows="1" id="input-multi-dates" class="input-multi-dates"></textarea>
JQUERY
$('.pick-multi-dates').multiDatesPicker({
minDate: 0,
altField: '#input-multi-dates',
onSelect: function() {
$('.input-multi-dates').css('height', 'auto' );
$('.input-multi-dates').height( this.scrollHeight );
}
});
的CSS
.input-multi-dates {
overflow-y: hidden; /* prevents scroll bar flash */
padding-top: 1.1em; /* prevents text jump on Enter keypress */
}
謝謝
嘗試這個:
$('.pick-multi-dates').multiDatesPicker({
minDate: 0,
altField: '#input-multi-dates',
onSelect: function() {
var text = document.getElementById('input-multi-dates');
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
});
或您的固定jQuery版本:
$('.pick-multi-dates').multiDatesPicker({
minDate: 0,
altField: '#input-multi-dates',
onSelect: function() {
var $area = $('.input-multi-dates');
$area.css('height', 'auto' );
// 'this' within onSelect function refers to the associated input field
// see: http://api.jqueryui.com/datepicker/#option-onSelect
$area.css( 'height', $area[0].scrollHeight );
// according to jQuery doc append 'px' is not neccessary: When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string.
// see: http://api.jquery.com/css/
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.