Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2011, 15:41
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

input="text" с автошириной
Не могу сообразить как сделать чтобы при вводе текста ширина у input="text" увеличивалась и уменьшалась исходя из объема текста в поле.
Иными словами чтобы ширина должна подгоняться вплотную к ширине введенного текста.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2011, 15:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Тут недавно рассматривался такой пример... Но для точнсти (хоть какой-то) - нужно использовать моноширный шрифт.
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2011, 16:02
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Была такая тема. Но вообще, как-то так:

<style>
#inp {
 font-family: monospace;
 font-size: 16px;
}
</style>
<input id="inp" />
<script>
el= document.getElementById("inp");
el.onkeydown=el.onkeyup=el.onchange=el.onkeypress= function(){
 this.style.width= this.value.length*12 + "px";
};
</script>
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #4 (permalink)  
Старый 09.11.2011, 16:02
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

ksa, вот кстати нет. Использовал моноширинный - всё равно подглючивает.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #5 (permalink)  
Старый 09.11.2011, 16:08
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

trikadin,
да, этого мне вполне хватит, думал может есть что-то чего не знал ...
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #6 (permalink)  
Старый 09.11.2011, 16:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от trikadin
Использовал моноширинный - всё равно подглючивает.
Инпуты не так просты!
Ответить с цитированием
  #7 (permalink)  
Старый 09.11.2011, 16:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Бивас, тест!

<!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">
input {
	width: 10px;
	font-family: 'Courier New';
	font-size: 12pt;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	var a=['click','keyup','select','focus']
	$(a).each(function(i){
		$('input').bind(a[i],function(){
			var i=this.value.length;
			i=(i==0)? 1: i;
			$(this).css('width',i*10+'px');
		});
	});
});
</script>
</head>
<body>
<input type='text' />
</body>
</html>

Вроде чётко работает...

Последний раз редактировалось ksa, 09.11.2011 в 16:21.
Ответить с цитированием
  #8 (permalink)  
Старый 09.11.2011, 17:27
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

можно в скрытом Диве дублировать строку из Инпута
и синхронизировать размеры,

в этом случае не обязательно моноширный шрифт

<!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">
input, #hideEl {
    font-family: 'Times';
    font-size: 12pt;
}
input {
    width: 10px;
}
#hideEl {
    position: absolute;
    top: -9999px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
    var $hideEl = $('<div id="hideEl">'),
        $input = $('input'),
        a=['click', 'keyup', 'select', 'focus'];
    
    $hideEl.appendTo(document.body);
    
    $(a).each(function(i, v){
        $input.bind(v, function () {
            $hideEl.text(this.value);
            $input.width($hideEl.width() + 10);
        });
    });
});
</script>
</head>
<body>
<input type='text' />
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 10.11.2011, 08:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Pavel M. Посмотреть сообщение
position: absolute;
top: -9999px;
Неее, такое мне не нравится...
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2011, 10:26
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от ksa Посмотреть сообщение
Неее, такое мне не нравится...
Это просто один из надежных способов скрыть элемент и сделать чтобы он менял ширину при добавлении контента, можно использовать другие.

Последний раз редактировалось Pavel M., 10.11.2011 в 10:29.
Ответить с цитированием
Ответ



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

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