title: Jump to the next row of a textarea as I don't want the text to reach the end of the text area
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-sm-12" style="margin-left:0px; margin-top: 20px"&gt;
    &lt;label style=" width: 99%; font-weight:normal; margin-left: -15px" class="surveyquestion"&gt;2.b. Identify other lending programs managed by applicant.&lt;/label&gt;
  
    &lt;textarea style="width:90%; " id="otherLendingPrograms" maxlength="8000" data-bind="css: otherLendingProgramsCSS , attr: { title: otherLendingProgramsToolTip }, event: {focusout: checkLostFocus.bind($root, $data, 'otherLendingPrograms')}, value: otherLendingPrograms"&gt;&lt;/textarea&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like the text to be shifted to the next row underneath the first row when it reaches specific amount of digits. I don't want the teach to go all the way to the end of the text area box.  for example: text is <code>123456789</code></p>
  
  <p>I would like <code>12345</code> for the first row and <code>6789</code> goes to the next one under. Just an example. </p>