textarea 只读自动高度（用选定的日期填充）答案

【问题标题】：textarea readonly auto height (that fills with selected dates)textarea 只读自动高度（用选定的日期填充）
【发布时间】：2023-03-10 06:50:02
【问题描述】：

我使用 MultiDatesPicker 日历，用户可以在其中选择一些日期。一个文本区域（带有只读标签）对象自动填充日期，而用户选择其中一些并且工作正常。我现在喜欢做的是使 textarea 的高度等于其中文本的高度（来自 Multidatepicker 的日期）。从 1 行开始。

我尝试了这个答案（第二个答案）Creating a textarea with auto-resize（工作：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 */
}

谢谢

【问题讨论】：

标签： javascript jquery datepicker jquery-multidatespicker

【解决方案1】：

试试这个：

$('.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';
        }
    });

【讨论】：

【解决方案2】：

或者你的固定 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/
    }
});

【讨论】：