it-blog.club
div атрибут contenteditable

div атрибут contenteditable

Совсем недавно перед мною встала задачка по поводу реализации автоматического изменения размера, а именно высоты у textarea, при вводе текста. Если вы уже сталкивались с подобной проблемой или столкнулись сейчас, то наверняка используете javascript. Да, в большинстве случаев это реально хороший выход из ситуации. Но зачем писать кучу огромного кода, когда можно обойтись без js. Конечно я не могу знать специфику вашей задачи, вёрстки и логики работы сайта, но вот вам моё решение.

Вместо использования обычного textarea, мы будет юзать div. Да, вы не ослышались самый обычный html div. Но зададим ему атрибут contenteditable со значением true.

 <div id="text-block" class="text-block" contenteditable="true">Введите ваш текст...</div> 

Украсьте ваш блок, задайте минимальную высоту! Именно через min-height, Максимальную задавать не нужно, так как он же должен будет у нас растягиваться.

С помощью этого атрибута, мы смогли преобразовать наш блок, в текстовое поле, но при этом сохранив все свойства обычного div'а

Но так же не стоит забывать, что этот элемент так и остался обычным блоком. Стало быть, если вам необходимо будет отправлять введённый текст в БД, то необходимо немного дописать в ваш JS.

Я надеюсь что вы используете ajax. В тот момент когда мы собираем поля нашей форы, в самом конце просто добавим содержимое нашего блока. Пример нижу приведён для того случая, если у вас имеются ещё какие либо поля, по мимо нашего блока.


$('form').submit(function(){
var msg = $(this).serialize() + '&text='+$('#text-block').text();
$.ajax({
type: 'POST',
url: 'некий ваш урл',
data: msg,
success: function(){
alert('Форма успешно отправлена');
}
});
return false;
});

На своей странице вы увидите ваш блок и при клике в него вы сможете редактировать текст, а так же он будет автоматически растягиваться.


it-blog.club 507
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать