Как изменить ширину input в таблице?

Question

[Евгений Иванов]

Подойдет любой вариант CSS/Jquery...

Есть таблица, в ячейках которой расположены input.

<table>
<tr><td><input class="input-type-text" type="text" name="field1" value="Тут текст" ></td>
<tr><td><input class="input-type-text" type="text" name="field2" value="Тут много текста" ></td>
</table>

Нужно, чтобы ширина input была равна ширине текста. Проще говоря, текст полностью вмещался в input (не "скрывался" из за размера поля).
PS
Подобный вопрос, но с изменением размера input при вводе текста уже тут обсуждали.

Comments

[Михаил Р.]

Проще говоря, текст полностью вмещался в input (не "скрывался" из за размера поля).

А если текст будет не несколько строк?

[Евгений Иванов]

Михаил Р., по условию задачи пока такого не может быть. Но если вдруг понадобится, тогда там где надо вставлю textarea.

Answer 1

[Danny Arty]

Comments

[Евгений Иванов]

Это работает, но у меня это будет работать немного криво.
Дело не в вашем коде, а в том, что у меня много input-ов. Слишком много.
Всё тормозит.
Можно просто при загрузке сделать ширину инпут по содержимому?
Без изменения ширины при дальнейшем вводе текста.

[Danny Arty]

Евгений Иванов, на чистом css для input-ов вряд ли получится, так как для них ширина задается атрибутом size. Можно разве что схитрить и вместо input поставить например span и задать соответствующие стили

<span role="textbox" contenteditable>какой-то текст</span>

Либо все таки с помощью js изменить ширину всех input-ов при загрузке. А сколько input-ов то на странице примерно?

[Евгений Иванов]

Danny Arty

Можно разве что схитрить и вместо input поставить например span

Интересно, может ли span выступать в роли input в плане отправки данных с формы? Звучит, конечно странно, да и делать так наверно не стоит. Сейчас объясню что не так с инпутами.

Вообщем идея была сделать таблицу. 30 колонок и 100 строк.
Каждому пользователю нужно было показать одну (его) строку и дать возможность её менять.
Итого 30 инпутов.
Но потом появилась идея показать некоторым пользователям 2 и более строк.
Инпутов на странице стало больше.

Методом научного тыка было определено, что:
- нахождение более 300 инпутов на странице вызывает замедление работы браузера (процессор память не загружены, видно дело в браузере).
- при сабмите формы с 1000 инпутов (знаем толк в развлечениях) происходит сбой (не буду уточнять что и как).

Я не хотел столько инпутов, но других простых вариантов сделать "таблицу" я не знаю.
Есть вариант с обычной таблицей (table) и перехватом клика по ячейке, с подставлением туда инпута.
Потом надо будет как то сохранять эти изменения (ajax?)
Идея интересная, но у меня это займет долгое время (плохо знаю jQuery).

[Danny Arty]

Евгений Иванов, 1000 инпутов на одной странице? Да их же заполнить нереально одному юзеру, как минимум я бы и не стал начинать даже. Почему бы реально не воспользоваться ajax? Подгрузкой инпутов и сабмитом.

[Евгений Иванов]

1000 инпутов на одной странице? Да их же заполнить нереально одному юзеру

Таблица. И в реальности один юзер заполняет 30 инпутов.
Он видит 30 инпутов. 1 строку таблицы. У него ничего не глючит. Всего 30 инпутов.

20 юзеров заполнят 20х30 инпутов.
Админ может видеть всю таблицу. И вот тут возникают проблемы.
Решил пагинацией. Но в идеале надо делать как в гугл таблицах.

Подгрузкой инпутов и сабмитом

Над этим надо думать. Как будет время - подумаю. Задача интересная. Подобных решений в сети ещё не видел.