Comments 15
Хрень какая-то… если кликнуть по плэйсхолдеру, то фокус не сработает на текстареи… если так и делать, то плэйсхолдер надо делать лэйбелом и указывать for. Также не понятно, почему только в ФФ? В других браузерах ЦСС нынче не работает? ;)
Надо вешаться на другое событие. С keydown некорректно будет работать при вставке из буфера обмена через контекстное меню. Используйте событие input.
Непонятны причины использования setTimeout. Он зачем вдруг понадобился?
Для обертки не помешает overflow: hidden на случай, когда плейсхолдер вдруг окажется больше, чем textarea.
Еще можно обойтись без background-color: transparent и сопутствующих проблем, если обертку сделать label'ом и не шаманить с z-index'ами.
А решение на чистом CSS не будет работать. Плейсхолдер убирается только пока есть фокус на поле. Когда фокус пропадет, плейсхолдер вернется, несмотря на наличие текста.
Непонятны причины использования setTimeout. Он зачем вдруг понадобился?
Для обертки не помешает overflow: hidden на случай, когда плейсхолдер вдруг окажется больше, чем textarea.
Еще можно обойтись без background-color: transparent и сопутствующих проблем, если обертку сделать label'ом и не шаманить с z-index'ами.
А решение на чистом CSS не будет работать. Плейсхолдер убирается только пока есть фокус на поле. Когда фокус пропадет, плейсхолдер вернется, несмотря на наличие текста.
setTimeout был нужен при использовании keydown — без таймаута (даже нулевого) проверка поля происходит до того как как там появится символ.
С использованием события input все стало работать и при вставке через контекстное меню + setTimeout стал не нужен.
попробовал overflow: hidden – не получается, т.к. у блока placeholder стоит position: absolute
Но я считаю это некритичным, т.к. при верстке такого специфического поля несложно учесть его размер,
зная текст для placeholder и задать min-height: XXXpx;
попробовал с label и без background-color: transparent и z-index
тоже не получилось без них, т.к. при клике правой кнопкой мыши по placeholder появляется контекстное меню как при клике по блоку, а не по textarea.
Возможно это как-то можно сделать, хотя мне пока непонятно зачем. Чем плохо использование background-color: transparent и z-index?
С чистым CSS действительно не прокатывает.
Пост обновил.
Большое спасибо за подсказки!
С использованием события input все стало работать и при вставке через контекстное меню + setTimeout стал не нужен.
попробовал overflow: hidden – не получается, т.к. у блока placeholder стоит position: absolute
Но я считаю это некритичным, т.к. при верстке такого специфического поля несложно учесть его размер,
зная текст для placeholder и задать min-height: XXXpx;
попробовал с label и без background-color: transparent и z-index
тоже не получилось без них, т.к. при клике правой кнопкой мыши по placeholder появляется контекстное меню как при клике по блоку, а не по textarea.
Возможно это как-то можно сделать, хотя мне пока непонятно зачем. Чем плохо использование background-color: transparent и z-index?
С чистым CSS действительно не прокатывает.
Пост обновил.
Большое спасибо за подсказки!
Таки да, overflow: hidden можно применить
для этого у placeholder нужно к position: absolute и top: 0 добавить еще bottom: 0, right:0, left:0;
Надо заметить, что цель использования overflow: hidden достигается не полностью. Размер обертки по вертикали почему-то получается на несколько пикселей больше textarea, а размер placeholder совпадает с размером обертки.
Поэтому overflow: hidden прячет лишний текст placeholder, но часть первой спрятанной строки выглядывает под textarea.
для этого у placeholder нужно к position: absolute и top: 0 добавить еще bottom: 0, right:0, left:0;
Надо заметить, что цель использования overflow: hidden достигается не полностью. Размер обертки по вертикали почему-то получается на несколько пикселей больше textarea, а размер placeholder совпадает с размером обертки.
Поэтому overflow: hidden прячет лишний текст placeholder, но часть первой спрятанной строки выглядывает под textarea.
Работает только с прозрачным textarea, это смех.
Комментом выше я написал, как можно реализовать без прозрачного textarea. Впрочем, не считаю это совсем уж большой проблемой. Просто стилей чуть больше. Бэкграунд textarea заменяется бэкграундом обертки.
А зачем? если можно сделать без велосипедов на JS.
можно пример без велосипедов?
Динамически менять контент textarea? Согласен, может быть приемлемым. Только это опять будет велосипедом.
Я на решение смотрел со своей колокольни: недавно реализовывал нечто подобное для однострочных инпутов в соответствиями с принципами Material. Там как раз после перебора пачки вариантов пришел к похожему, но это в силу ограничений, которых нет в задаче автора.
Я на решение смотрел со своей колокольни: недавно реализовывал нечто подобное для однострочных инпутов в соответствиями с принципами Material. Там как раз после перебора пачки вариантов пришел к похожему, но это в силу ограничений, которых нет в задаче автора.
можно было обойтись без JS, с помощью css
Попробуйте поиграться с разными word-wrap, break-word и т.п., вдруг поможет.
И ещё, помнится, во времена IE6 плейсхолдеры реализовывали, просто изменяя value у текстовых полей, зачем накладывать див сверху? Критично, чтобы value был пустым, если в поле плейсхолдер?
И ещё, помнится, во времена IE6 плейсхолдеры реализовывали, просто изменяя value у текстовых полей, зачем накладывать див сверху? Критично, чтобы value был пустым, если в поле плейсхолдер?
Готовые решения с изменением value у текстовых полей показались мне излишне громоздкими и неудобными.
Зачем много кода, если можно обойтись обработкой одного события в JS.
Зачем много кода, если можно обойтись обработкой одного события в JS.
Sign up to leave a comment.
Многострочный textarea placeholder, который работает в Firefox