Хороший способ определить максимальное количество символов в пользовательской области на веб-странице

Question

Я работаю над приложением купона, и у него есть область, где владельцы бизнеса могут ввести короткую «строку тега» для того, для чего предназначен купон. Например:

• 10% на одно блюдо!
• 5 долларов США
• 2 за 1 саке до 7 вечера
• 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/