Is it possible to get input's value width and resize the input dynamically so the value will fit?
Here's an example:
Add a comment
|
10 Answers
Here is the jQuery code :
$('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);
});
1 Comment
Mohamad Al Asmar
This is not working on jsfiddle, please consider adding 'keydown' function to listen to keypresses
I have a jQuery plugin on GitHub: https://github.com/MartinF/jQuery.Autosize.Input
It mirrors the value of the input so it can calculate the actual length instead of guessing or other approaches mentioned.
You can see an live example here: http://jsfiddle.net/jw9oqz0e/
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();
Comments
Current answers were waay to complicated. Heres a quick one
$('#myinput').width($('#myinput').prop('scrollWidth'))
Adding the above to input keydown/up/press events is trivial. Tested in chrome
2 Comments
Federico C
Technically the question mentioned jquery. However this is the best solution to the problem. Rgds
Tomh
This doesn't seem to decrease the width when I delete characters though.
Something simple :
$('#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
});
You could change the multiplier on personal preference / text-size
Example : http://jsfiddle.net/bzBdX/6/
Comments
$(function(){
$("input").keyup(function(){
$(this).stop().animate({
width: $(this).val().length*7
},100)
})
})
Comments
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.
1 Comment
Alejandro Pérez
Why do you multiply by 0.89?
As mentioned by @ManseUK. This line worked for me. JQuery version 1.8
$('#resizeme').css({width:newwidth});
Comments
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);
Comments
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);
Comments
You can check this demo on js fiddle ... http://jsfiddle.net/ninadajnikar/bzBdX/9/ .
You update the width values as you like it
