Resizable input type text — поля для ввода текста с изменяемым размером

В современном поколении браузеров(я это заметил где то с 3 firefox еще) появилась очень удобная функция, при помощи которой мы можем растягивать и уменьшать textarea.  Конечно это нередко ломает верстку, но лично я даже не знаю, что бы я без нее делал, потому что это очень удобно.

Что делать, когда нужно прикрутить точно такую же возможность к input[type=»text»]?

На самом деле универсального кроссбраузерного способа пока нет,  ниже я опишу вещи, которые могли бы помочь, но они не так эффективны как хотелось бы.

jQuery UI Resizable

Для блочных элементов это работает отменно, но для input’ов, по крайней мере из коробки это не работает,так как хотелось бы:

До

После


После увеличения размера

Конечно если делаем для какой-нибудь своей админки или тулзы, можно это быстро прикрутить в надежде поправить это потом, но заставлять пользоваться таким пользователей нельзя — это факт.

CSS Resize

Сначала скриншот: это то что нам нужно!

Это отлично, но это CSS3 и судя по всему дело отдаленного будущего. Любители ишаков и оперы не смогут пользоваться этим, потому опять же, если нам нужен кроссбраузерный способ — это не наш выбор.

В рамках данной заметки, я не буду пытаться поправить jQuery UI resizable, потому как он попросту для этого не рассчитан, на просторах интернета я нашел неплохой способ решить проблему.

Вообще надо было начать с того, что проблема возникала из-за того, что в input[type=»text»] подгружался какой текст, а размеры input’ов были всегда одинаковы, а нам нужно, чтобы ширина input’a была не меньше текста, находящегося в нем.

Тут нам поможет вот такой простой скрипт:

1
2
3
4
function resizeInput() {
$(this).attr('size', $(this).val().length + 10);
}
$('input[type="text"]').keyup(resizeInput).each(resizeInput);

Как видно ничего сложного и это решает. Конечно не очень круто, что в какой-нибудь большой форме все поля будут разного размера, но тут важна лишь идея, дальше можете модифицировать это и подстраивать под свою ситуацию.

  1. Комментариев пока нет




YouTube бесплатно навести проклятие порчу