У меня есть различные плагины для автоматического разворота текстового поля, но не ввода текстовых полей. Знает ли кто-нибудь, если они существуют?
Есть ли плагин joguery autogrow для текстовых полей?
Ответ 1
Вот плагин, который будет делать то, что вам нужно:
EDIT. Я исправил плагин в соответствии с комментарием Mathias.:)
Смотрите демонстрацию здесь: http://jsfiddle.net/rRHzY
Плагин:
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
Ответ 2
У меня есть плагин jQuery на GitHub: https://github.com/MartinF/jQuery.Autosize.Input
Он использует тот же подход, что и Джеймс, но имеет некоторые изменения, упомянутые в комментариях.
Здесь вы можете увидеть живой пример: http://jsfiddle.net/mJMpw/6/
Пример:
<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;
}
Вы просто используете css для установки min/max-width и используете переход по ширине, если хотите приятный эффект.
Вы можете указать пробел/расстояние до конца как значение в нотации json для атрибута ввода-autosize-input на входном элементе.
Конечно, вы можете просто инициализировать его с помощью jQuery
$("selector").autosizeInput();
Ответ 3
Хороший плагин, спасибо! Я изменил две вещи, которые, казалось, лучше работали в моем проекте.
- Я изменил тег TESTER на DIV, чтобы избежать "неожиданного вызова метода или доступа к свойствам". в IE8 (хотя ваша демонстрация действительно работает в IE8. Была ли особая причина для использования пользовательского тега HTML?
- После оператора привязки в конце кода я добавил вызов check(), чтобы изменить размер текстового поля сразу после загрузки страницы, если текстовое поле уже содержит контент при запуске.
Надеюсь, что это поможет.
Ответ 4
просто хотел поделиться небольшим улучшением с плагином Джеймса. Добавьте этот код в объявление CSS для элемента тестера для учета текстового отступа:
textIndent: 0
Без этого в некоторых ситуациях элемент тестера может случайно наследовать текст-отступ из другого места, отбрасывая размер ввода.
Как и JP, я также хотел изменить размер ввода до нужного размера с самого начала, что я сделал несколько иначе, связав "trigger (" keyup ") с вызовом метода autoGrowInput, например:
$('#contact_form').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger('keyup');
В качестве дополнительной заметки я подписался на этот сайт, чтобы просто прокомментировать решение Джеймса, и я немного раздражен, обнаружив, что не могу, потому что у меня нет достаточных точек репутации для начала. Извините, если я что-то пропустил, но это, похоже, означает, что я должен опубликовать это комментарий к основному вопросу, а не более адекватно по решению Джеймса.
Ответ 5
Я бы тоже заменил
$(this).bind('keyup keydown blur update', check)
к
$(this).bind('keyup blur update', check).bind('keydown', function() {
setTimeout(check);
});
чтобы изменить размер поля сразу после его повторной визуализации браузером. Это избавило бы поле от некоторой болтовни.
Ответ 6
Я создал плагин для ввода текста типа, который воссоздает это поведение. Он имеет некоторые другие уникальные функции. Вы можете увидеть пример и просмотреть документацию плагина, Ответ @james имеет некоторые проблемы с вставкой большого текста во вход. Чтобы исправить это, я внесла некоторые изменения в его код. Вот пример для этого примера.
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 200,
minWidth: 1,
comfortZone: 1,
width: 1
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
maxWidth = o.maxWidth,
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = testerWidth + o.comfortZone,
currentWidth = input.width();
if (testerWidth < minWidth) {
newWidth = minWidth;
} else if (testerWidth > maxWidth) {
newWidth = maxWidth;
}
input.width(newWidth + o.comfortZone);
};
testSubject.insertAfter(input);
$(this).bind('input', check);
});
return this;
};
})(jQuery);
Ответ 7
Если вы хотите, чтобы текстовое поле увеличивалось, когда строка внутри него простиралась за его ширину, возможно, что-то вроде этого будет работать для вас... Он обнаруживает атрибут размера текстового поля. Если длина строки передается по этому атрибуту, она расширяет текстовое поле до длины строки на клавиатуре.
В ниже script "#test" - это идентификатор текстового поля.
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#test").keyup(function(){
if($("#test").attr("size") < $("#test").val().length){
size = $("#test").val().length;
$("#test").attr("size",size);
}
})
});
</script>
Ответ 8
Достаточно смешно в переполнении IE: видимый воспринимается очень серьезно. Вы можете добиться этого эффекта, применяя переполнение: видимое на ваших элементах ввода. Не уверен, существуют ли какие-либо подобные трюки CSS для современных браузеров.
Ответ 9
Удивительный плагин Джеймс! Благодарю. Я добавил предложение проверки в конце JP хотя и очень эффективно.
Также я добавил некоторые изменения с моей стороны. Я хотел установить размер для ввода максимального размера, если измененная ширина превысила maxWidth, поэтому я добавил:
else if (widthexceeds){
input.width(o.maxWidth);
}
ниже параметра if для параметра isValidWidthChange, где widthexceeds = newWidth > o.maxWidth
Ответ 10
Я создал плагин с именем input-autogrow чтобы решить эту проблему для моих собственных проектов. Этот плагин был первоначально основан на ответе Джеймса, но был улучшен во многих отношениях.
https://github.com/westonganger/input-autogrow
input-autogrow - это плагин для вводов автозапуска. Этот плагин отличается от других, поскольку большинство обычно предназначаются для тегов textarea, поэтому эта библиотека ориентирована на теги ввода. Требуется библиотека DOM, такая как jQuery, Zepto или любая, которая поддерживает плагины $.fn.
Вот несколько примеров использования.
/* Makes elements readonly if they already have the readonly attribute */
$('input.autogrow').inputAutogrow();
/* Manually trigger update */
$('input.autogrow').trigger('autogrow');
/* or */
$('input.autogrow').trigger('change');
/* Custom Options */
$('input.autogrow').inputAutogrow({maxWidth: 500, minWidth: 25, trailingSpace: 10});
/* Remove autogrow from input */
$('input.autogrow').inputAutogrow('destroy');