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

Question

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

• 一份主菜可享受 10% 的折扣!
• 立减 5 美元
• 晚上 7 点前 2 份清酒 1 份
• 如果你叫 Gary，可以免费获得 15 个烙饼

同样，这是用户生成的。它将显示在客户可以看到的屏幕上。我希望它在一定数量的像素内显示在一行上。它将使用 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/