title: .preventDefault() not working in on.('input', function{})
body: <p>I would like to limit number of chars in my editable div to 10. After user reach the limit I would like to use <code>.preventDefault()</code> method to protect the div from additional chars. Can you help me out, please?</p>
  <p>JSFiddle
  <a href="https://jsfiddle.net/7x2dfgx6/1/" rel="noreferrer">https://jsfiddle.net/7x2dfgx6/1/</a></p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;profileInfo&quot; id=&quot;About&quot; style=&quot;border:solid;&quot; contenteditable=&quot;true&quot;&gt;OOOOO&lt;/div&gt;
  </code></pre>
    
  <p>JQuery</p>
  <pre><code>    jQuery(document).ready(function($){
  
      const limit = 10;
      rem = limit - $('#About').text().length;
      $(&quot;#counter&quot;).append(&quot;You have &lt;strong&gt;&quot; + rem + &quot;&lt;/strong&gt; chars left.&quot;);
      $(&quot;#About&quot;).on('input', function(event) {
          var char = $('#About').text().length;
          rem = limit - char;
          $(&quot;#counter&quot;).html(&quot;You have &lt;strong&gt;&quot; + rem + &quot;&lt;/strong&gt; chars left.&quot;);
          if(char&gt;limit)
          {
              event.preventDefault();
              //TODO
          }
      });
  });
  </code></pre>