Javascript 根据jquery中的字符计算字体大小

我正在尝试创建一个方法，该方法将读取文本框中的所有字符并返回字体大小值

我的功能不正常。下面是我的代码

    function sizeInput(input) {
    return shrinkToFill(input, 48, '', 'Impact');
}
function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
    var font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
    var $input = $(input);
    var maxWidth = $input.width() - 50;

    // we're only concerned with the largest line of text.
    var longestLine = $input.val().split('\n').sort(function (a, b) {
        return measureText(a, font).width - measureText(b, font).width;
    }).pop();

    var textWidth = measureText(longestLine, 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 * 0.9;
        font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
        // and set the style on the input

    }
    else {
        font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
        // and set the style on the input        
    }
    $input.css({
        'font-size': fontSize
    });
    return fontSize;
}
var measureText = function (str, font) {
    str = str.replace(/ /g, ' ');
    var id = 'text-width-tester';
    var $tag = $('#' + id);
    if (!$tag.length) {
        $tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + str + '</span>');
        $('body').append($tag);
    } else {
        $tag.css({
            font: font
        }).html(str);
    }
    return {
        width: $tag.width(),
        height: $tag.height()
    };
};
var topText = $('#topText');
var bottomText = $('#bottomText');

var textUpdated = function () {
    var topFontSize = sizeInput(topText);
    var bottomFontSize = sizeInput(bottomText);
};

函数大小输入（输入）{
返回shrinkToFill（输入，48，，“影响”）；
}
函数收缩填充（输入、fontSize、fontWeight、fontFamily）{
var font=fontWeight+''+fontSize+'px'+fontFamily；
变量$input=$（输入）；
var maxWidth=$input.width（）-50；
//我们只关心最大的一行文字。
var longestLine=$input.val（）.split（'\n'）.sort（函数（a，b）{
返回measureText（a，字体）.width-measureText（b，字体）.width；
}).pop（）；
var textWidth=measureText（最长的行，字体）.width；
如果（textWidth>=maxWidth）{
//如果太大，请计算新的字体大小
//这里额外的0.9弥补了一些过度措施
fontSize=fontSize*maxWidth/textWidth*0.9；
font=fontWeight+''+fontSize+'px'+fontFamily；
//并在输入上设置样式
}
否则{
font=fontWeight+''+fontSize+'px'+fontFamily；
//并在输入上设置样式
}
$input.css({
“字体大小”：字体大小
});
返回字体大小；
}
var measureText=函数（str，font）{
str=str.replace（//g'，）；
变量id='文本宽度测试仪'；
var$tag=$（“#”+id）；
如果（！$tag.length）{
$tag=$（''+str+''）；
$（'body'）。追加（$tag）；
}否则{
$tag.css({
字体：字体
}).html（str）；
}
返回{
宽度：$tag.width（），
高度：$tag.height（）
};
};
var topText=$（“#topText”）；
var bottomText=$（“#bottomText”）；
var textUpdated=函数（）{
var topFontSize=sizeInput（topText）；
var bottomFontSize=大小输入（bottomText）；
};

---

它不会返回任何错误，但不起作用。

这是解决方案

var sizeInput=函数（输入）{
返回shrinkToFill（输入，48，，“影响”）；
}
var shrinkToFill=函数（输入、fontSize、fontWeight、fontFamily）{
var font=fontWeight+''+fontSize+'px'+fontFamily；
变量$input=$（输入）；
var maxWidth=$input.width（）-50；
//我们只关心最大的一行文字。
var longestLine=$input.val（）.split（'\n'）.sort（函数（a，b）{
返回measureText（a，字体）.width-measureText（b，字体）.width；
}).pop（）；
var textWidth=measureText（最长的行，字体）.width；
如果（textWidth>=maxWidth）{
//如果太大，请计算新的字体大小
//这里额外的0.9弥补了一些过度措施
fontSize=fontSize*maxWidth/textWidth*0.9；
font=fontWeight+''+fontSize+'px'+fontFamily；
//并在输入上设置样式
}
否则{
font=fontWeight+''+fontSize+'px'+fontFamily；
//并在输入上设置样式
}
$input.css({
“字体大小”：字体大小
});
返回字体大小；
}
var measureText=函数（str，font）{
str=str.replace（//g'，）；
变量id='文本宽度测试仪'；
var$tag=$（“#”+id）；
如果（！$tag.length）{
$tag=$（''+str+''）；
$（'body'）。追加（$tag）；
}否则{
$tag.css({
字体：字体
}).html（str）；
}
返回{
宽度：$tag.width（），
高度：$tag.height（）
};
};
var topText=$（“#topText”）；
var bottomText=$（“#bottomText”）；
$（'#topText，#bottomText'）.keyup（函数（）{
var topFontSize=sizeInput（topText）；
var bottomFontSize=大小输入（bottomText）；
});

以下是答案：

function getFontSize(targetInput) {
        var input = $("<input>").css({ "width": "570px", "height": "52px", "text-align": "center", "font-size": "48px" })
        .val($(targetInput).val());
        var topFontSize = sizeInput(input);
        return topFontSize;
    }

函数getFontSize（targetInput）{
var input=$（“”）.css（{“宽度”：“570px”，“高度”：“52px”，“文本对齐”：“中心”，“字体大小”：“48px”}）
.val（$（targetInput.val（））；
var topFontSize=sizeInput（输入）；
返回topFontSize；
}
阅读适用的css不是更容易吗？检查我更新的代码，我只想要一个简单的方法，根据chanrecter返回字体大小。你能把它放在JSFIDLE中，然后添加链接吗？你没有向FIDLE添加任何css。但是当我返回字符时，它将无法完美工作谢谢@ShiladityaWelcome@nayemmansoori:）