Ограничение на максимальное число вводимых символов в текстовое поле

Вот HTML

<div class="text_box_2">
    <div class="count_text_box">
        <p data-count-textarea = "tx_1"><span class="countSimbols">0</span>/<span data-count-num = "10">50</span></p>
    </div>
    <div class="textarea_wrapp">
        <textarea data-textarea = "tx_1" placeholder="Опишите суть предложения и что входит в стоимость работы"></textarea>
    </div>
</div>

Вот js

$("[data-textarea]").on("keydown", function() {
  textareaName = $(this).attr("data-textarea");
  countTextareaBox = $("[data-count-textarea = '"+textareaName+"']");
  maxVal = countTextareaBox.find("[data-count-num]").attr("data-count-num");
  currentVal = $(this).val().length;
  str = $(this).val();
  if(currentVal > maxVal) {
    str.slice(0, -1);
    $(this).val(str);
  }
  countTextareaBox.find(".countSimbols").html(currentVal);
});

Вводится больше чем 50 символов. То есть не работает ограничение, а нужно чтобы после 50 символов перестало вводиться. Не могу найти ошибку. Пожалуйста подскажите как решить эту проблему?