0

ユーザーがいくつかの日付を選択できる MultiDatesPicker カレンダーを使用します。ユーザーがそれらのいくつかを選択し、正常に動作している間に、日付が自動的に入力される te​​xtarea (読み取り専用タグ付き) オブジェクト。私が今やりたかったのは、テキストエリアの高さをその中のテキストの高さと同じにすることです (Multidatepicker からの日付)。1列から。

私はこの答えを試しました（2番目の答え）自動サイズ変更でテキストエリアを作成します（動作：jsfiddle）が、私の場合はうまくいきませんでした

HTML

<div class="pick-multi-dates"></div>
<textarea rows="1" id="input-multi-dates" class="input-multi-dates"></textarea>

Jクエリ

    $('.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 */
}

ありがとうございました

4

2 に答える 2

1

または、固定された 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/
    }
});
于 2016-02-24T13:30:38.967 に答える