jQuery - автоматический ввод текста размера (не текстовая область!) [дубликат]
С любым достойным компилятором или средой выполнения исключения не подвергаются значительному штрафу. Это более или менее похоже на Оператор перехода, который переходит к обработчику исключений. Кроме того, ловление исключения средой выполнения (как JVM) помогает изоляции и исправлению намного легче ошибки. Я возьму NullPointerException в Java по segfault в C любой день.
4 ответа
Вот плагин, который сделает то, что вам нужно:
Плагин:
(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);
РЕДАКТИРОВАТЬ: Найдено на: Есть ли плагин автоматического увеличения jQuery для текстовые поля?
Я не думаю, что есть идеальное решение этой проблемы, потому что вы не можете определить фактическую ширину текста, введенного в элемент ввода. Все зависит от используемого шрифта, настроек масштабирования в браузере и т. Д.
Однако, если вы можете выбрать шрифт, в котором вы можете фактически вычислить количество пикселей, которые имеет текст (это самая сложная часть, но я думаю, вы можете попробовать оценить как-нибудь). Вы можете использовать это, чтобы изменить ширину вашего поля ввода.
$('input').keyup(function () {
// I'm assuming that 1 letter will expand the input by 10 pixels
var oneLetterWidth = 10;
// I'm also assuming that input will resize when at least five characters
// are typed
var minCharacters = 5;
var len = $(this).val().length;
if (len > minCharacters) {
// increase width
$(this).width(len * oneLetterWidth);
} else {
// restore minimal width;
$(this).width(50);
}
});
По умолчанию ширина ввода контролируется параметром size , который для type = "text" соответствует количеству символов в ширину, он должен быть .
Так как это измеряется в символах, а не в пикселях, фактический размер пикселя определяется используемым шрифтом (фиксированной ширины).
( Отредактировано: с использованием метода .text () вместо .html () для правильного форматирования.)
Здравствуйте, я не знаю, ищете ли вы все еще, но я наткнулся на это, когда искал сценарий, делающий то же самое. Надеюсь, это поможет любому, кто пытается сделать это или что-то подобное.
function editing_key_press(e){
if(!e.which)editing_restore(this.parentNode);
var text = $('<span>')
.text($(this).val())
.appendTo(this.parentNode);
var w = text.innerWidth();
text.remove();
$(this).width(w+10);
}
Логика этого кода состоит в том, чтобы поместить содержимое на страницу в диапазоне, а затем получить ширину этого содержимого и удалить его. Проблема, с которой я столкнулся, заключалась в том, что мне нужно было запустить его как при нажатии, так и при нажатии, чтобы он работал успешно.
Надеюсь, это поможет, может, нет, потому что я занимался jquery совсем недолго.
Спасибо
Джордж