Динамически изменить размер ввода -- jquery поле с участием input пол Связанный проблема

Dynamically resize input


3
vote

проблема

русский

Мне просто интересно, как у вас динамически разместите вход, как вы введете в него ??

Я хотел бы использовать jQuery, если это возможно и AMP; Я бы предпочел, чтобы это был маленький скрипт, чем громоздкий плагин.

Пожалуйста, дайте мне знать, Мэтт Мюллер

Английский оригинал

I was just wondering how do you dynamically resize an input as you type in it??

I'd like to use jQuery if possible & I would rather it be a small script than a bulky plugin.

Please let me know, Matt Mueller

</div
     

Список ответов

7
 
vote

Вот быстрое (непроверенное) решение

 <код> $('input[type="text"]').keyup(function(){   $(this).attr({width: 'auto', size: $(this).val().length}); });   
 

Here's a quick (untested) solution

$('input[type="text"]').keyup(function(){   $(this).attr({width: 'auto', size: $(this).val().length}); }); 
</div
 
 
     
     
5
 
vote

У меня есть плагин jQuery на Github: https://github.com/martinf/jquery. Autosize.input

Это около 1,6 кБ.

Вы можете увидеть живой пример здесь: http://jsfiddle.net/mjmpw/6/

Пример:

 <код> /^[w_-]*$/0  

Вы просто используете CSS, чтобы установить мин / максимальную ширину и использовать переход по ширине, если вы хотите приятный эффект.

Вы можете указать пространство / расстояние до конца в качестве значения в записи JSON для атрибута ввода данных-ввода данных на входном элементе.

Конечно, вы также можете просто инициализировать его, используя jQuery

 <код> /^[w_-]*$/1  
 

I have a jQuery plugin on GitHub: https://github.com/MartinF/jQuery.Autosize.Input

It is about 1.6 kb minified.

You can see an live example here: http://jsfiddle.net/mJMpw/6/

Example:

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />  input[type="data-autosize-input"] {   width: 90px;   min-width: 90px;   max-width: 300px;   transition: width 0.25s;     } 

You just use css to set min/max-width and use a transition on the width if you want a nice effect.

You can specify the space / distance to the end as the value in json notation for the data-autosize-input attribute on the input element.

Of course you can also just initialize it using jQuery

$("selector").autosizeInput(); 
</div
 
 
-1
 
vote

Я нашел этот легкий. Это для Textareas

jQuery Plugin: «AUTORESIZE»

Полная версия: ~ 4k

Министерны: ~ 1k

 

I found this lightweight one. This is for textareas

jQuery plugin: ‘autoResize’

Full version : ~4k

Minified : ~1k

</div
 
 
 
 

Связанный проблема

0  Как удалить текст по умолчанию Наведите текст и отобразить название пользовательского текста на Haver Donut Chart HighCharts  ( How to remove default hover text and display the custom text title on hover donu ) 
У меня создана диаграмма пончика, у меня проблема, показывает внутренние текстовые заголовки в двух строках для 'Meternity: 84'. Когда я зависаю / Наведи...

7  Объект IIFE и Window?  ( Iife and window object ) 
<Код> IIFE Что нужно получить доступ без переопределения <код> window объект - можно рассматривать как: что-то вроде ( jQuery Пример): <код> $(function...

0  jQuery - скрыть предметы, если окно недостаточно высокое  ( Jquery hide items if window is not tall enough ) 
У меня есть фиксированная строка меню слева от страницы. Но я хотел бы, чтобы пункты меню были скрыты, если в окне достаточно высока, чтобы показать все элеме...

0  Имея проблемы с использованием объема в jQuery  ( Having issues using a scope in jquery ) 
Так что я пытаюсь передать значение переменной FreeMarker ($ {item.uid}) на клик ссылки, чтобы запустить модаль с тем же уникальным значением идентификатора. ...

0  jQuery работает в Firefox, Safari, но не в Chrome  ( Jquery working in firefox safari but not in chrome ) 
Я написал какой-то код с JQuery Works в Firefox, Safari и IE9. Но Chrome это не нравится. Никаких очевидных MSG в Chrome Console не подходит. Я ударяю стену, ...

0  Весной MVC возвращает ответ AJAX с использованием Jackson  ( Spring mvc return ajax response using jackson ) 
У меня есть сценарий, в котором я заполняю раскрывающуюся коробку в JSP через ответ AJAX с сервера. В контроллере я отказываюсь от коллекции объектов продукта...

0  Как интегрировать history.js на мой сайт Ajax?  ( How to integrate history js to my ajax site ) 
У меня осталось и правый div на моем сайте и с навигационными кнопками. Допустим, Button_1, Button_2. При нажатии на эти кнопки изменит правильный контент D...

41  Тест, если элемент уже имеет jQuery DatePicker  ( Test if element already has jquery datepicker ) 
У меня есть форма со многими входными элементами. Некоторые поля встречаются на сегодняшний день с jQuery UI DatePicker Arlaedy прилагается: <код> $("#someE...

1  jQuery Получить остальные значения опционов в формате CSV  ( Jquery get remaining option values in csv format ) 
Я хочу вернуть форматунную строку CSV, чтобы установить значение поля входного текста с значениями параметров из окна выбора. $. Карта ($ ('# Добавлена ​​д...

1  ajax () не отвечает после события keyup  ( Ajax not responding after keyup event ) 
Это проблема jQuery / ajax. JQuery / ajax отвечает на событие keyup с оповещением (LOC), показывающим результат значения, введенного в текстовое поле числа. ...

0  JQuery - Как два элемента - IMG - Div, когда наведите курсор на IMG Показать / Скрыть Div - добавлен с Hover Hote / Show на IMG AllReady  ( Jquery how two elements img div when hover over img show hide the div ad ) 
Я очень новый для удивления, который jQuery. И я просто выясняю, как сделать мои кнопки IMG показать / прятаться с разницей непрозрачности (как таковой) <...

6  Как обнаружить IE7 и ниже, используя jquery.support?  ( How to detect ie7 and lower using jquery support ) 
В настоящее время я использую jquery.browser для обнаружения IE7 и ниже <код> if ($.browser.msie && parseInt($.browser.version) <= 7) { //codes } Но...

2  Scala.js: выбор и манипулирующий сгенерированный SVG  ( Scala js selecting and manipulating generated svg ) 
Я борюсь с чем-то, казалось бы, простым. Использование SCAJA.JS, я создал несколько SVG с библиотекой STALATAGS. Теперь я хочу манипулировать элементами S...

0  jQuery: передача это к детской функции  ( Jquery passing this to child function ) 
У меня есть что-то подобное: <код> $('element.selector').live("click", function (){ run_some_func (); }); $('element.selector2').live("click", function...

1  Как включить фотовипе без щелчка?  ( How to turn on photoswipe without click ) 
Я использую мобильный телефон Фотографий Галерея. Моя проблема заключается в том, что мне нужно загрузить его не нажима на изображение, а на кликах на други...

Связанный проблема

0  Как удалить текст по умолчанию Наведите текст и отобразить название пользовательского текста на Haver Donut Chart HighCharts 
7  Объект IIFE и Window? 
0  jQuery - скрыть предметы, если окно недостаточно высокое 
0  Имея проблемы с использованием объема в jQuery 
0  jQuery работает в Firefox, Safari, но не в Chrome 
0  Весной MVC возвращает ответ AJAX с использованием Jackson 
0  Как интегрировать history.js на мой сайт Ajax? 
41  Тест, если элемент уже имеет jQuery DatePicker 
1  jQuery Получить остальные значения опционов в формате CSV 
1  ajax () не отвечает после события keyup 
0  JQuery - Как два элемента - IMG - Div, когда наведите курсор на IMG Показать / Скрыть Div - добавлен с Hover Hote / Show на IMG AllReady 
6  Как обнаружить IE7 и ниже, используя jquery.support? 
2  Scala.js: выбор и манипулирующий сгенерированный SVG 
0  jQuery: передача это к детской функции 
1  Как включить фотовипе без щелчка?