textarea 文本框字数限制 demo

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <textarea id="editor" style="width: 500px; height: 200px;"></textarea>
  <p id="status"></p>
  <p id="error" style="color: red;"></p>

  <script>
   window.onload = function () {
    var el = document.getElementById('editor');
    el.addEventListener('input',function () {
     var text =  this.value;

     var selection = this.selectionStart;
     var textarr = text.split("\n");

     var line = 0;
     var column = 0;

     if (textarr.length == 1) {
      line = 1;
      column = selection;
     } else {
      if (text.length == selection) {
       line = textarr.length;
       column = textarr[textarr.length - 1].length;
      } else {
       var selectionText = text.substr(0, selection);
       var selectionTextArr = selectionText.split("\n");
       line = selectionTextArr.length;
       column = selectionTextArr[selectionTextArr.length - 1].length;
      }
     }


     document.getElementById("status").innerText = "当前编辑第 " + line + " 行，该行有 " + column + " 个字符";
     if (textarr.length > 4) {
      document.getElementById("error").innerText="最多4行";
      return;
     } else {
      document.getElementById("error").innerText="";
     }

     for (var i = 0; i < textarr.length; i++) {
      if (textarr[i].length > 55) {
       document.getElementById("error").innerText="第"+ (i+1) + "行内容超过了55个";
       return;
      } else {
       document.getElementById("error").innerText="";
      }
     }
    });
   }
  </script>
 </body>
</html>