确定网页上用户生成区域允许的最大字符数的好方法

Question

我正在开发一个优惠券应用程序，它有一个区域，企业主可以在其中输入简短的“标签行”来说明优惠券的用途。例如：

• 一份主菜 10% 折扣！
• 美元立减
• 晚上 7 点前 1 份清酒 2
• 15 份免费烙饼（如果您的名字是 Gary）

再次强调，这是用户生成的。它将显示在客户可以看到的屏幕上。我希望它在一定数量的像素内显示在一行上。它将采用 Arial 语言。

考虑到很多浏览器，确定允许包含的最大字符数的最佳方法是什么，这样就不会占用额外的行或溢出......？

Answer 1

如果您知道一行的font、font-size和总width，那么您可以进行试错计算（即也就是说，输入字符直到行尾）。

一旦您知道了这一点，您就可以检查 keyup 上的字符总数，并在达到该数量时发出警报。

例如，仅作为示例，假设您选择 Arial 14px，并且您已经对其进行了测试，发现 10 个字符大约是一行可以容纳的全部字符。然后你可以添加类似这样的

$('textarea').keyup(function(){
    if($(this).val().length == 10){
        alert('You\'ve reached the limit');
    }
});

工作示例： http://jsfiddle.net/uGDKn/< /a>