CODEWITHSUNDEEP
javascriptjquery
IrfanM
IrfanM

Reputation: 725

Make a text-input field expand in width as text is entered

I am trying to have a text-input field that is only wide enough to handle one character. But when the one character is typed, it grows to the left and to the right so now it can hold 2 characters. Then, when the second character is typed grows again so that it can hold 3 characters.

This goes on and on as long as the user types in input.

How can this be done in javascript / jQuery ?

Upvotes: 0

Views: 408

Answers (1)

Barkermn01
Barkermn01

Reputation: 6822

This is a good question but no easy way to do it really first you need a max-width setting in the css of your text input,

after witch you can use some jQuery like so

$("#input_id").keyup(function(){
    $("body").append("<div id=\"remove_me\">"+$(this).val()+"</div>");
    var width = $("#remove_me").width()+30;
    $(this).animate({"width":width});
    $("#remove_me").remove();
});

Upvotes: 1

Related Questions