Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Динамическое изменение ширины в зависимости от содержимого (https://javascript.ru/forum/events/22703-dinamicheskoe-izmenenie-shiriny-v-zavisimosti-ot-soderzhimogo.html)

iNfantry 29.10.2011 16:36

Динамическое изменение ширины в зависимости от содержимого
 
Всем привет, вопрос очень простой и наверное избитый, но так и не смог найти внятного ответа.
Допустим есть элемент input type="text" и требуется менять его ширину динамически в зависимости от длины его value.
Как это сделать на jQuery? Или просто на js, не принципиально.

Aetae 29.10.2011 20:01

Утрируя:
<input type="text" size="1" onkeydown="size=value.length||1" onkeyup="onkeydown()" onkeypress="onkeydown()" onchange="onkeydown()">

iNfantry 29.10.2011 20:27

Сорри, наверно не до конца пояснил вопрос.
А проблема в том, что изменение size через жквери не меняет визуально ширину элемента, хотя в атрибут записывает. Не могу понять почему изменяя этот атрибут из жс внешне нифига не происходит.

ksa 29.10.2011 20:51

Цитата:

Сообщение от iNfantry
проблема в том, что изменение size через жквери не меняет визуально ширину элемента

Смотрел в Опере и ФФ - всё там работает...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#test').bind('keyup keydown keypres select click',function(){
		var l=this.value.length;
		l=(l==0)? 1: l;
		$('#test').attr('size',l);
	});
});
</script>
</head>
<body>
<input id='test' size='1' type='text' />
</body>
</html>


Другое дело сайз не совсем совпадает с количеством элементов... :) Лучше подобрать моноширный шрифт и менять свойство цсс width.

Aetae 29.10.2011 21:03

Цитата:

Сообщение от ksa (Сообщение 133465)
l=(l==0)? 1: l;

Типа для наглядности? Имхо, перебор.)

ksa 29.10.2011 21:05

Цитата:

Сообщение от Aetae
Имхо, перебор.

В ФФ если size='0' - длинна поля становится "по умолчанию"... Т.е. принимает размер как

<input type='text' />

Aetae 29.10.2011 21:08

дык)
size=value.length||1

ksa 29.10.2011 21:11

Цитата:

Сообщение от Aetae
size=value.length||1

Учту...

Kolyaj 29.10.2011 21:11

Жестоко называть переменную l, а потом её ещё сравнивать с 1.

ksa 29.10.2011 21:14

Kolyaj, ну не такая уш это и жестокость... :D l ~ len.
Просто привык я к коротким именам переменных, команд и функций... У нас в Cache всё "понимается" по первой букве (максимум двум)...

Да и в редаторах цифры подсвечиваются не так как идентификаторы переменных...


Часовой пояс GMT +3, время: 08:57.