Is it possible to get input\'s value width and resize the input dynamically so the value will fit?
Here\'s an example:
http://jsfiddle.net/bzBdX/2/
this example as been tested on Chrome 25 and 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);
As mentioned by @ManseUK. This line worked for me. JQuery version 1.8
$('#resizeme').css({width:newwidth});
http://jsfiddle.net/bzBdX/11/
So i made an example where it tries to calculate the width by inserting letters in a span and calculating there width
(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 });
});
} ());
Theres probably a much better way of doing this.
All those solutions based on number of characters are quite weak, because each character could be of a different width if it is not a monotype font. I'm solving this problem with creating a div containing value of text input with the same font properties and getting its width as a required one.
Something like this:
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);