Auto size text font while typing in textfield

Question

I searched for it but could not found exact solution.

Note: For Duplicate makers, I read these but could not help This & Autosize

I have text field in html for Nationality,Some Nationalities are few characters like UAE,INDIA etc but some are very long.

If someone is typing a lengthy Nationality,text font should be reduced automatically just like in PDF.

Here is my text field

<input type="text" size="7" style="float: left; border-width: medium medium 1px; border-style: none none solid; border-color: -moz-use-text-color -moz-use-text-color

 rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none;
 border-image: none; padding: 0px 8px; font: 700 12px verdana;
 text-transform: uppercase; vertical-align: baseline; margin: 0px 5px 0px 0px;" name="client_nationality" value="" id="client_nationality">

Here is js fiddle attached

possible duplicate of [Shrinking font-size at a user types to fit in an input using Javascript](http://stackoverflow.com/questions/6114300/shrinking-font-size-at-a-user-types-to-fit-in-an-input-using-javascript) — ale, May 01 '14 at 07:16

A.T. · Answer 1 · 2014-05-01T11:26:18.817

2

you can use jquery something like:

$('.text_font_resize').keyup(function(ev){
if($(this).val().length > 7)
{
    var size =  $(this).css("font-size");
    size = size.slice(0,-2)
    size -= 0.9;
    if(size >= 8)
    {
        $(this).css("font-size",size + "px");
    }
}
if($(this).val().length === 0)
{
    $(this).css("font-size","12px");
}

});

here is fiddle

Better approaches could be there.. :)

edited May 01 '14 at 11:26

answered May 01 '14 at 07:10

A.T.

24,694
8
47
65

This will progressively make the entire textbox smaller and smaller... You need an `else` case to reset the `font-size` if 7 characters or less. – GregL May 01 '14 at 07:12
Buggy, but pretty crazy! :) – sidneydobber May 01 '14 at 07:13
yes something should be left for OP, anyway i ll' do it – A.T. May 01 '14 at 07:13
Here is one issue,It shrinks down the textfield..I do not want that..how to do it? – user3244721 May 01 '14 at 11:00
well that need to check minimum font-size, and you can increase text field length or let the overflow text vertically normally with minimum font-size – A.T. May 01 '14 at 11:15
This is the issue how to do to keep things smoothly – user3244721 May 01 '14 at 11:20

score 0 · Answer 2 · edited May 23 '17 at 10:32

This is a possible duplicate of Shrinking font-size at a user types to fit in an input using Javascript :)

function measureText(txt, font) {
 var id = 'text-width-tester',
     $tag = $('#' + id);
 if (!$tag.length) {
    $tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + txt + '</span>');
    $('body').append($tag);
  } else {
    $tag.css({font:font}).html(txt);
 }

 return {
    width: $tag.width(),
    height: $tag.height()
 }
}
function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
 var $input = $(input),
     txt = $input.val(),
     maxWidth = $input.width() + 5, // add some padding
     font = fontWeight + " " + fontSize + "px " + fontFamily;

 // see how big the text is at the default size
    var textWidth = measureText(txt, font).width;
    if (textWidth > maxWidth) {
    // if it's too big, calculate a new font size
    // the extra .9 here makes up for some over-measures
    fontSize = fontSize * maxWidth / textWidth * .9;
    font = fontWeight + " " + fontSize + "px " + fontFamily;
    // and set the style on the input
    $input.css({font:font});
} else {
    // in case the font size has been set small and 
    // the text was then deleted
    $input.css({font:font});
 }
}

$(function() {
$('#my_input').keyup(function() {
    shrinkToFill(this, 20, "", "Georgia, serif");
 })
});

Auto size text font while typing in textfield

2 Answers2