Set element max length

searching here for an answer I found the following question:

Answer for similar issue

I’m trying to replicate this answer but in a different scenario and seems that it doesn’t work when I call a function instead of jQuery key events on document.ready().

This is what I have:

function maxLenght(event) {
  var input = $('p[data-id="111"]').get(0);

  if (parseInt(input.textContent.length) >= 10) {
    event.preventDefault();
  } else {
    $(input).outerHeight(32).outerHeight(input.scrollHeight + 4);
  }
        
  $('span').text('Total chars:' + (input).textContent.length);
}
p {
    height: 100px;
    width: 300px;
    border: 1px solid grey;
    outline: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p contenteditable="true" data-id="111" onkeyup="maxLenght(event)"></p>
<span></span>

Also I should be able to paste text using right click or ctrl + v, navigate the text using arrow keys, backspace, delete key, etc.

So my question is if is possible to do it keeping this functionallity (calling a function) and how can I do it and what’s wrong from what I have right now?