Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2011, 16:36
Кандидат Javascript-наук
Отправить личное сообщение для iNfantry Посмотреть профиль Найти все сообщения от iNfantry
 
Регистрация: 29.10.2011
Сообщений: 125

Динамическое изменение ширины в зависимости от содержимого
Всем привет, вопрос очень простой и наверное избитый, но так и не смог найти внятного ответа.
Допустим есть элемент input type="text" и требуется менять его ширину динамически в зависимости от длины его value.
Как это сделать на jQuery? Или просто на js, не принципиально.
Ответить с цитированием
  #2 (permalink)  
Старый 29.10.2011, 20:01
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,429

Утрируя:
<input type="text" size="1" onkeydown="size=value.length||1" onkeyup="onkeydown()" onkeypress="onkeydown()" onchange="onkeydown()">
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 29.10.2011, 20:27
Кандидат Javascript-наук
Отправить личное сообщение для iNfantry Посмотреть профиль Найти все сообщения от iNfantry
 
Регистрация: 29.10.2011
Сообщений: 125

Сорри, наверно не до конца пояснил вопрос.
А проблема в том, что изменение size через жквери не меняет визуально ширину элемента, хотя в атрибут записывает. Не могу понять почему изменяя этот атрибут из жс внешне нифига не происходит.
Ответить с цитированием
  #4 (permalink)  
Старый 29.10.2011, 20:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,474

Сообщение от 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.

Последний раз редактировалось ksa, 29.10.2011 в 20:54.
Ответить с цитированием
  #5 (permalink)  
Старый 29.10.2011, 21:03
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,429

Сообщение от ksa Посмотреть сообщение
l=(l==0)? 1: l;
Типа для наглядности? Имхо, перебор.)
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 29.10.2011, 21:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,474

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

<input type='text' />
Ответить с цитированием
  #7 (permalink)  
Старый 29.10.2011, 21:08
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,429

дык)
size=value.length||1
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 29.10.2011, 21:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,474

Сообщение от Aetae
size=value.length||1
Учту...
Ответить с цитированием
  #9 (permalink)  
Старый 29.10.2011, 21:11
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Жестоко называть переменную l, а потом её ещё сравнивать с 1.
Ответить с цитированием
  #10 (permalink)  
Старый 29.10.2011, 21:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,474

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое изменение содержимого фрейма VetalStar Элементы интерфейса 3 21.12.2010 22:14
Частичное изменение содержимого элемента kuhok Events/DOM/Window 28 07.09.2009 21:44
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 13:12
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 16:17
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 15:55