Как отключить изменение размеров (resize) для textarea

Вам нужно отключить посетителю возможность изменять размеры textarea в Safari и Chrome?

Некоторые продвинутые браузеры, использующие движок webkit позволяют изменять размеры textarea растягивая его за специальный маркер: «Угол textarea в Safari или Chrome»

Возможность замечательная. Заодно обрати внимание, что поле можно легко растянуть и за пределы колонки с текстом. По идее посетитель растянет поле, если ему так удобнее. Конечно если в дело не вмешается Дизайнер. Как всегда он лучше всех знает, как пользователю будет удобнее и, нисколько не смущаясь, уверенными движениями мыши меняет в макете привычный вид контроллов, на что-нибудь гениальное.

И тут webkit браузеры подкладывают ему неплохую мину. Ведь поле по-прежнему можно растянуть!

Поскольку предложение не менять привычный вид контроллов скорее всего будет воспринято как шутка, будем искать другие пути. Вспомнив, что «наши недостатки являются продолжением наших достоинств» и «клин клином вышибают» будем побеждать webkit браузеры их же методами. Воспользуемся тем, что в них частично реализована поддержка CSS3 в том числе и свойство resize.

CSS
textarea
{
    resize:none;
}

Прием очень прост. Webkit браузеры это свойство поймут и запретят ресайз. Остальные — просто пропустят. Voila, как говорят французы. Мораль — изучайте новые стандарты! Перемены не за горами.

Проверено в: IE 6-8, Firefox 2-3.5, Opera 9.5-10, Safari 3, Chrome 10

С помощью CSS3 свойства resize можно успешно бороться с webkit браузерами Safari и Chrome, запрещая пользователю изменять размеры textarea на странице.

0 комментариев

Оставить комментарий