Как сделать input расширяющимся?

Question

[OwerFan]

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

Comments

[Богдан Ерольский]

Если я правильно понял вопрос, не проще ли генерировать нужное количество input и в каждый выводить элемент матрицы?
Тогда в цикле можно задавать уникальный id, и при обработке данных значения легко считываются.

[OwerFan]

Богдан Ерольский, Я тоже вначале так думал, но подумал что это сложнее, чем зафигарить один textarea или что-то в этом подобное. Там нужно типа счетчика делать, т.е. пользователь должен указать, какую матрицу он хочет ввести, а это скорее на js, нужно делать, отлавливать событие и т.д. Решил спросить, может есть что-то иное

Answer 1

[umid]

я бы сделал textarea c resize: none

пример.

Comments

[OwerFan]

Единственное что смущает что при нажатии на textarea курсор помещается не начало. Можно сделать, чтобы при нажатии на textarea курсор помещался в начало textarea? Как так сделать?

[Strannyk]

OwerFan, гуглите "textarea selectionStart" и т.д.

[umid]

OwerFan, я думаю можно сделать так.
Думаю это годится за ответ.

[umid]

Strannyk, да, можно сказать немного так, выше мое решение

Answer 2

[Икотий Айтишевич]

<input type="text" onkeydown="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Comments

[OwerFan]

Так оно в ширину у меня почему то едет, а вниз нет)))

[Икотий Айтишевич]

OwerFan, Так Ваш вопрос: Как сделать input расширяющимся?
Поэтому он в ширину и едет. Но вы можете чуть–чуть изменить код и сделать, чтобы input менял высоту и добавить переносы, через свойство word-break

Answer 3

[zkrvndm]

Смотрите плагин autosize.