html расширить текстовое поле
Тюнинг резинового текстового поля
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.
Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов полей (margin), будет равна:
width = width + padding-left + padding-right 
Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:
Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы поля (margin) должны быть равны padding-left и padding-right для элемента input.
При таком описании input-элемент будет выступать из width-setter на величину своих горизонтальных отступов (padding), а в IE6 — растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute.
Опишем по-новому исходный набор контейнеров:
В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте.
Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство width для контейнера input-width.
Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.
Как сделать адаптивный по высоте/ширине инпут
Рано или поздно вы получите от дизайнера макет, где встретится он — с виду вроде бы обычный текстовый инпут, а на деле, меняющий свою ширину или высоту, в зависимости от содержимого. Хорошие новости — отчаиваться не будем, это возможно. Причем, возможно достаточно разнообразными способами, об одном из них сегодня и поговорим.
Проблема
Прежде чем кидаться решать проблему — ее нужно осознать. С чего бы начать? Все зависит от поставленной вам задачи. Например: если требуется, чтобы инпут расширялся в ширину — это одна проблема. Если нужно чтобы он рос в высоту — это проблема другая. А если нужно чтобы сразу во все стороны, тут можно начинать страдать, дело-то непростое.
Главная проблема состоит в том, что элементы ввода не умеют растягиваться по своему содержимому. Это очень досадно и конечно мир был бы лучше, если бы они умели, но увы. Более того, однострочное текстовое поле — input вообще бессмысленно растягивать в высоту, содержимое все равно не ляжет в несколько строк, так уж он устроен. Поэтому дальше начинаются любимые фронтендерами лайфхаки.
Варианты решения
Самый первый, приходящий в топ выдачи гугла — это просто взять и заменить инпут на div с атрибутом contenteditable — и вот оно, проблема решена! Вот вам адаптивный по высоте/ширине див и редактируемое содержимое. Но если для вас (как и для меня) это не вариант, то смотрим дальше.
Следующий вариант не назовешь слишком изящным, но работающий вот что важно. Основан на том, что где-то позади самого текстового поля мы прячем невидимый блок, куда дублируем содержимое текстового поля при любом изменении. Блок изменяет свои размеры по содержимому, мы вычисляем их с помощью ява-скрипта и присваиваем текстовому полю. Если вас не смущает дополнительный мусор на странице в виде такого вот костыля — смело можно брать на вооружение.
Ну и третий вариант, который мне больше всего пришелся по душе — это все-таки вычислять содержимое текстового инпута и адаптировать его ширину/высоту, чтобы все помещалось. Давайте на него посмотрим чуть более внимательно.
Выбираем правильный инпут
Прежде всего, понадобится заменить input на textarea. Поскольку инпуты бесполезно наращивать в высоту, лучше сразу возьмем многострочное поле и будем делать вид, что это однострочный инпут.
Добавляем немного стилей, чтобы замаскировать истинную сущность нашего текстового поля.
Тут следует обратить внимание на три обязательных параметра, без которых ничего не сработает: box-sizing, height, min-height.
box-sizing: border-box
В обязательном порядке box-sizing должен быть в значении border-box, чтобы когда вы добавите паддинг в текстовом поле, а вы его обязательно добавите, он не увеличивал дополнительно высоту или ширину текстового поля, а откладывался бы вовнутрь.
height и min-height (width и min-width)
Тут все просто: height — чтобы изначально textarea выглядела бы как input. min-height — чтобы при сбросе значения высоты текстовое поле не прыгало, а оставалось минимально необходимого размера. Все это справедливо и для свойств width и min-width.
Немного теории
Принцип действия очень простой. У каждого DOM-элемента, который может содержать контент, есть readonly-свойство scrollHeight (scrollWidth) которое и содержит так нужную нам, истинную высоту элемента, такую, при которой все содержимое этого элемента будет видно пользователю. Все, что нам требуется — при изменении текстового поля, вычислять значение scrollHeight/scrollWidth и присваивать его текстовому полю.
А для того, чтобы текстовое поле могло еще и возвращаться к своему исходному виду, перед изменением, будем сбрасывать установленную ранее высоту до нуля, для того чтобы свойство scrollHeight корректно бы показало нам, есть ли контент, не умещающийся в текстовом поле.
Немного vanilla JS-практики
Специально не использовала никаких фреймворков, для большей гибкости. Любым удобным способом получаем текстовое поле со страницы и добавляем обработчик события input
Это ввод с клавиатуры. Не стоит забывать, что текстовые поля бывают заполняются автоматически, извне. Для этого добавляем отдельный метод вставки значения:
Ну и давайте для ширины тоже сделаем. Все то же самое, только тут уже берем input, и высоту меняем на ширину.
Результат
Вот такие поля получились. Несложно и недолго.
Адаптивный инпут, растущий в высоту:
Адаптивный инпут, растущий в ширину:
Angular Директива
Для тех, кто дочитал аж до сюда — бонус. Если лень самостоятельно упаковать все это в директиву, я уже все сделала за вас, смотрите:
Здесь используется уже знакомый вам декоратор @HostListener. А если еще не знакомый, то обязательно почитайте статью об этом.
Пример использования:
Да, можно обойтись одним элементом — textarea. Просто, если нужна адаптивность в ширину — добавим CSS-свойство white-space: nowrap — запрет на перенос строк.
В остальном, все, о чем говорили, плюс — настраиваемый параметр horizontal указывающий что тянуть, ширину или высоту. Выбирайте нужный вариант и ни в чем не отказывайте своему дизайнеру.
Приходилось вам сталкиваться с подобной задачей? Как решали?
Как растянуть поле input на всю ширину ячейки таблицы
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Как растянуть картинку на всю ширину ячейки таблицы QTableView?
Есть кусок полоски, хотелось бы чтобы вся эта полоска была была по всей ширине ячейки таблицы.
Растянуть input на всю доступную ширину
В форме 2 input’а. Ширина 2-ого 200px. Как сделать чтобы 1-ый занял всё остальное пространство.
Содержимое ячейки растянуть на всю ее ширину в TableView
Как сделать, чтобы progressBar занимал всю ячейку?
Использование строки width: 100% в CSS даст вам нужный результат. Текстовое поле растянется на всю ширину ячейки.
Вот пример html файла со встроенным CSS кодом:
Добавлено через 1 минуту
Там для первого input прописан класс, а для второго класс отсутствует, поэтому так и отображается.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Как растянуть div на всю ширину сайта?
Можете ли вы мне подсказать как растянуть div на всю ширину сайта, width: 100% пробовал, див.
Как растянуть строки на всю ширину QTableWidget?
В таблице два столбца, ширина первого должна подгоняться автоматом, а ширина второго фиксирована.
Как установить размер текстового поля HTML?
Как установить размер текстового поля HTML?
10 ответов
в зависимости от того, что вы подразумеваете под «textbox».
имейте в виду, что размер текстового поля является «жертвой»W3C в коробке модель. Что я имею в виду под жертвой, так это то, что высота и ширина текстового поля-это сумма свойств высоты/ширины, назначенных выше, в дополнение к высоте/ширине заполнения и ширине границы. По этой причине ваши текстовые поля будут немного отличаться размерами в разных браузерах в зависимости от заполнения по умолчанию в разных браузерах броузеры. Хотя разные браузеры, как правило, определяют разные отступы в текстовые поля, большинство сброс таблицы стилей не имеют тенденцию включать теги в их листах сброса, так что это то, что нужно иметь в виду.
вы можете стандартизировать это, определив собственное дополнение. Вот ваш CSS с указанным заполнением, поэтому текстовое поле выглядит одинаково во всех браузерах:
Я добавил 1 пиксельное заполнение, потому что некоторые браузеры, как правило, делают текстовое поле слишком если забиты обивка 0px. В зависимости от вашего дизайна вы можете добавить еще больше заполнения, но настоятельно рекомендуем вам определить заполнение самостоятельно, иначе вы оставите его до разных браузеров, чтобы решить для себя. Для еще большей согласованности между браузерами вы также должны сами определить границу.
код текстового поля:
Итак, сначала вы выбираете свой элемент с атрибутами(посмотрите первый пример) или классы (посмотрите последний пример). Позже вы назначаете элементу значения высоты и ширины.
это работает для меня в IE 10 и FF 23
Если вы не хотите использовать метод class, вы можете использовать метод parent-child для внесения изменений в текстовое поле.
например. Я сделал форму в форме разд.
теперь код CSS будет выглядеть так:
таким образом, он остается независимым от того, какой textsize был установлен для textbox. Вы увеличиваете высоту, используя заполнение вместо
попробуйте этот код :
таким образом, он остается независимым от того, какой textsize был установлен для textbox. Вы увеличиваете высоту, используя вместо этого прокладку.
Как установить размер текстового поля HTML?
Как установить размер текстового поля HTML?
В зависимости от того, что вы подразумеваете под “текстовым полем”.
Имейте в виду, что размер текстового поля является “жертвой” reset таблиц стилей не включают теги в своих reset, так что это то, что нужно иметь в виду.
Вы можете стандартизировать это, указав свое собственное дополнение. Вот ваш CSS с указанным дополнением, поэтому текстовое поле выглядит одинаково во всех браузерах:
Я добавил 1 пиксельное дополнение, потому что некоторые браузеры, как правило, делают текстовое поле слишком забитым, если заполнение равно 0px. В зависимости от вашего дизайна вы можете захотеть добавить еще больше дополнений, но очень рекомендую вам сами определять дополнение, иначе вы оставите его в разных браузерах, чтобы сами решить. Для большей согласованности между браузерами вы также должны определить границу самостоятельно.
Итак, сначала вы выбираете свой элемент с атрибутами (смотрите первый пример) или классы (смотрите последний пример). Позже вы назначаете значения высоты и ширины вашему элементу.
Это работает для меня в IE 10 и FF 23
Если вы не хотите использовать метод класса, вы можете использовать метод parent-child для внесения изменений в текстовое поле.
Например, Я сделал форму в моей форме div.
Теперь код CSS будет выглядеть следующим образом:
Lookout! Атрибут width обрезается атрибутом max-width.
Поэтому я использовал….
Вы можете сделать зависимую ширину ввода от ширины контейнера.
Если вы хотите ограничить число букв в текстовом поле:
maxlength = “10” внутри тега ввода