Можно ли получить ширину входного значения и динамически изменять размер входа так, чтобы оно соответствовало?
Вот пример:
Можно ли получить ширину входного значения и динамически изменять размер входа так, чтобы оно соответствовало?
Вот пример:
Вот код jQuery:
$('input').each(function(){
var value = $(this).val();
var size = value.length;
// playing with the size attribute
//$(this).attr('size',size);
// playing css width
size = size*2; // average width of a char
$(this).css('width',size*3);
});
У меня есть плагин 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();
Текущие ответы были сложными. Херес быстрый
$('#myinput').width($('#myinput').prop('scrollWidth'))
Добавление вышеуказанного для ввода событий ввода/выключения/нажатия тривиально. Протестировано в хроме.
Что-то простое:
$('#resizeme').keydown(function(){ // listen for keypresses
var contents = $(this).val(); // get value
var charlength = contents.length; // get number of chars
newwidth = charlength*9; // rough guesstimate of width of char
$(this).css({width:newwidth}); // apply new width
});
Вы можете изменить множитель на личные предпочтения/размер текста
Пример: http://jsfiddle.net/bzBdX/6/
$(function(){
$("input").keyup(function(){
$(this).stop().animate({
width: $(this).val().length*7
},100)
})
})
Итак, я сделал пример, где он пытается рассчитать ширину вставка букв в пролет и вычисление там ширины
(function() {
var mDiv = $("<span />").text("M").appendTo("body"),
mSize = mDiv.width();
mDiv.detach();
var letterSize = function(s) {
var sDiv = $("<span />").text("M" + s + "M").appendTo("body"),
sSize = sDiv.width();
sDiv.detach();
return (sSize - (mSize * 2)) * 0.89;
};
$("input[data-resise-me]").each(function() {
var minSize = $(this).width();
var resizeInput = function() {
var calcSize = $.map($(this).val(), letterSize);
var inputSize = 0;
$.each(calcSize, function(i, v) { inputSize += v; });
$(this).width( inputSize < minSize ? minSize : inputSize );
};
$(this).on({ keydown: resizeInput, keyup: resizeInput });
});
} ());
Возможно, это гораздо лучший способ сделать это.
Как упоминалось @ManseUK. Эта линия работала для меня. Версия JQuery версии 1.8
$( '# ResizeMe') CSS ({ширина: newwidth});.
Все эти решения, основанные на количестве символов, довольно слабы, потому что каждый символ может иметь разную ширину, если он не является шрифтом монотипа. Я решаю эту проблему с созданием div, содержащего значение ввода текста с теми же свойствами шрифта и получением его ширины как требуемого.
Что-то вроде этого:
function resizeInput() {
$('body').append('<div class="new_width">'+$(this).val()+'</div>');
$(this).css('width', $('.new_width').width());
$('.new_width').remove()
}
$('input')
// event handler
.keyup(resizeInput)
// resize on page load
.each(resizeInput);
этот пример был протестирован в Chrome 25 и Firefox 19. (http://jsfiddle.net/9ezyz/)
function input_update_size()
{
var value = $(this).val();
var size = 12;
// Looking for font-size into the input
if (this.currentStyle)
size = this.currentStyle['font-size'];
else if (window.getComputedStyle)
size = document.defaultView.getComputedStyle(this,null).getPropertyValue('font-size');
$(this).stop().animate({width:(parseInt(size)/2+1)*value.length},500);
//$(this).width((parseInt(size)/2+1)*value.length);
}
$('input')
.each(input_update_size)
.keyup(input_update_size);
Вы можете проверить это демо на js скрипке... http://jsfiddle.net/ninadajnikar/bzBdX/9/.
Вы обновляете значения ширины по своему усмотрению