JS: Изменение ширины элемента согласно содержимому

iNfantry

Новичок
Всем привет, вопрос не касается php, но всё же надеюсь на помощь.
Полагаю очень банальная ситуация, есть элемент input type="text", необходимо динамически изменять его ширину согласно его содержимому (value="..."), не понимаю как именно посчитать нужную длину чтобы задать ее в css width?
 

Yaponchick

Новичок
CSS + width никак, пока не поставить моноширинный шрифт

Простейший вариант: JS + size="..."
 

iNfantry

Новичок
А вот с size запарка, почемуто на его установку из жс инпут никак не меняет своих размеров. А изначальный alert(input.attr('size')) вобще 0 выдает! При этом изначально он не задан.
 

HEm

Сетевой бобер
el.style.width = [размер текста в символах]*[ширина символа в пикселях] + 'px';

как то так

но зачем? можно подробнее, что вы хотите?
 

iNfantry

Новичок
Зачем - всё просто, есть див с текстом, даблклик по диву вызывает на его месте инпут тип=текст, редактируешь, сохраняешь, так вот - инпут должен создаваться по размеру текста в диве, который был.
 

HEm

Сетевой бобер
представим, на секундочку, что в div-е вбито 5 символов, мы кликаем даблкликом и у нас возникает на этом месте textarea/input шириной в 5 символов, в котором мы, к примеру, хотим написать аж целый параграф в 1000 знаков. И все время пока мы редактируем - мы вводим огромный текст в инпуте в 5 символов шириной. Ужос!
 

Semen

Семён
PHP:
<input type="text" name="text" value="test " size="4" onKeyDown="this.size=this.value.length">
 

HEm

Сетевой бобер
Semen
вводим 100500 символов, пространство безудержно растет, юзер радуется ;)
задать сразу 100% ширины стилем и не мучаться
 

HEm

Сетевой бобер
вообще, где то я уже видел подстраивающиеся под размер текста textarea, не помню вот только где... не на jQuery ли...
 

HEm

Сетевой бобер
ыыыыы, вот на этом сайте есть, к примеру увеличение высоты редактируемого блока при редактировании своей подписи в профиле
 

Semen

Семён
Semen
вводим 100500 символов, пространство безудержно растет, юзер радуется ;)
задать сразу 100% ширины стилем и не мучаться
радуется на своём мониторе...
можно ввести проверку на lengthMax
пускай ТС решает что ему надо
 

HEm

Сетевой бобер
ну вот, я к тому, что такие вещи надо продумать получше
 

iNfantry

Новичок
Сорри что пропал, выходные.
Вобщем с size странная штука, если ниже каковото значения его делаю, например 0<size<5 то оно по умолчанию ставится. Но это пофиг, третестепенная проблема. Изменение css width работает, это я затупил где-то. Сейчас другие вопросы возникли.

1. Допустим есть колонка таблицы td, можно ли какото вычислить длину содержимого? Не длину самой колонки которая задана либо не задана, а именно длину содержимого. Но подозреваю что это невозможно, так?

2. Насчет колонки другой вопрос. Есть таблица, в ней несколько колонок. В какойто из центральных колонок находится див с текстом, по щелчку на тексте в див вместо текста вставляется инпут для редактирования. Проблема вот в чем - какой бы маленький инпут не вставлялся он вызывает скачок/растяжение колонки. При этом если вставлять в див еще один такой же див с таким же текстом то никакого скачка не происходит, всё четко. Я уже с этим инпутом намучался, и маргины ему задавал и прочие стили которые на ширину/высоту влияют, всё бестолку! Возможно ли его вставить чтоб не косячила колонка?? Еще раз чтоб понятно было поясню кодом:

есть
...
<tr><td>trololo1</td><td style="width:200px"><div id="123">text for edit</div></td><td>trololo2</td></tr>
...

простешим кодом на жкуери делаем

$('#123').html('<input type="text" value="text for edit" style="margin:0px; width:100px;" />')

И после этого происходит скачок, НЕСМОТРЯ НА ТО ЧТО длина инпута в 2 раза меньше длины колонки!
 

HEm

Сетевой бобер
Я проверил простым тестом - ничего не скачет в ширину, проверьте влияние стилей на вашей странице с помощью файрбага или отладки в опере или хроме.

Я бы вообще ничего не менял бы кроме стиля textarea

<style>
.aaa textarea { border: 0; }
.bbb { border: 1px solid #303030; }
</style>
<td class='aaa'><textarea></textarea></td>

$(document).ready(function(){
$('.aaa textarea').hover(function() { this.addClass('bbb'); }, function() { this.removeClass('bbb'); }
}

ну как то типа того, зачем делать какие то сложные замены, если любой элемент можно заставить выглядеть как другой элемент
 

Ятеп

Новичок
Попробуйте обернуть редактируемый текст в span, и под размер этого span'a создайте поверх input.
При изменении содержимого input'a обновляйте содержимое span'a и подгоняйте инпут.
Ну и стили фонта должны быть одинаковые в input'e и div'e
 
Сверху