Limit Number Of Characters In Text Area

We have the code (below) that counts and limits characters in the text area input box.
However, the user can enter more than the limited characters while entering data.
After saving, the text entered is truncated to the set value of the limitation.
How can the code be modified to stop user input beyond the specified limit?
= = = = =
var ctrl3a = Runner.getControl(pageid, '3a');

document.getElementById('counter1').value = ctrl3a.getValue().length;
number_of_characters = 500;
function func1()

{

document.getElementById('counter1').value = ctrl3a.getValue().length;
if (ctrl3a.getValue().length>number_of_characters)

{

ctrl3a.setValue(ctrl3a.getValue().substr(0,number_of_characters));

document.getElementById('counter1').value = number_of_characters;

}

}

ctrl3a.on('keyup', func1);