Виджет User Notes Widget, включенный в мой плагин Dashboard Widgets Suite, позволяет пользователям редактировать заметки прямо на приборной панели WP. Чтобы сделать вещи еще более удивительными, каждая заметка автоматически расширяется по мере того, как пользователь набирает больше строк текста. В этом посте рассказывается о том, как я добился этого трюка, а также о нескольких текстовых областях с автоматическим изменением размера.
HTML/PHP
Допустим, вы генерируете серию HTML-текстарей с помощью цикла PHP. Наряду с каждой текстовой областью, включите скрытое поле ввода, как показано ниже:
<textarea name="dws-notes-user[note]" class="dws-note-id-<?php echo $key; ?>" rows="3" data-min-rows="3"></textarea>
<input name="dws-notes-user[count]" type="hidden" value="<?php echo intval($key); ?>">Обратите внимание, что $key — это индексный маркер, который генерируется с помощью цикла foreach() (например, $key => $value). Таким образом, при включении в цикл foreach() или while() этот код будет генерировать несколько пар полей textarea/input, сколько угодно.
jQuery
После того, как на странице появится несколько пар полей textarea/input, мы можем завершить технику с помощью следующей плиты jQuery:
$('input[name="dws-notes-user[count]"]').each(function(index, value) {
window.$dws_note_ids = { note_id: '.dws-note-id-'+ index };
var note_id = window.$dws_note_ids.note_id;
jQuery(document).one('focus.textarea', note_id, function() {
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
}).on('input.textarea', note_id, function() {
var minRows = this.getAttribute('data-min-rows') | 0, rows;
this.rows = minRows;
// console.log(this.scrollHeight, this.baseScrollHeight);
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
this.rows = minRows + rows;
});
});Вот оно, волшебство. Этот сниппет перебирает скрытые входы и изменяет размер каждого связанного с ним текстового поля по мере того, как пользователь набирает текст. Чтобы увидеть этот сниппет в действии, посмотрите виджет User Notes Widget в моем плагине Dashboard Widgets Suite.
CSS (необязательно)
После того как вы настроите функцию автоматического изменения высоты, вы, возможно, захотите настроить отображение нескольких текстовых областей. Вот несколько CSS, которые помогут вам двигаться в правильном направлении.
form textarea {
width: 100%; min-height: 50px; box-sizing: border-box; margin: 3px 0; padding: 5px;
overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; overflow: hidden;
}Здесь overflow:hidden убирает вертикальную полосу прокрутки, поэтому удалите это свойство, если вам нужна вертикальная полоса прокрутки. Очевидно, что при работе с несколькими текстовыми областями с автоматическим изменением размера необходимо учитывать множество факторов, поэтому вам придется экспериментировать и настраивать их по мере необходимости. Техника, представленная в этом руководстве, должна дать вам хорошую отправную точку для дальнейшего развития и тонкой настройки.