Question

我搜索了它但找不到确切的解决方案。

注意：对于Duplicate制作人，我读过这些但无法帮助This＆amp; Autosize

我在html中有国籍的文本字段，有些民族很少有阿联酋，印度等字符，但有些很长。

如果有人输入冗长的国籍，则应自动缩小文字字体，就像在PDF中一样。

这是我的文字字段

<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

Answer 1

你可以使用jquery之类的东西：

$('.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");
}

}）;

这里是fiddle

可能有更好的方法.. :)）

Answer 2

这可能是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");
 })
});

在文本字段中键入时自动调整文本字体大小

2 个答案: