计数textarea中已加载文件中的字符数？

Question

我可以在输入文本区域时计算字符数

 function count_up(obj){ document.getElementById('numbers').innerHTML = obj.value.length; } 

 <textarea name="textField" class="text_edit" id="my_text" onkeyup="count_up(this);"></textarea><br/> <span id="numbers">0</span> 

但是我想将文件加载到textarea时计算文件中的字符数。 此功能还可以，但是如果我要计算文件中的字符，则必须在加载的文本中添加一些内容（这是不直观的）。 我可以做些什么来解决它吗？

Answer 1

 textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; font-size: 16px; resize: none; } 

 <textarea name="" id="" cols="30" rows="10" onkeyup="countCharToMax(this)"></textarea> <div id="charNum">0/30</div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> function countCharToMax(val) { var max = 30; var min = 0; var len = val.value.length; if (len >= max) { val.value = val.value.substring(min, max); $('#charNum').text(len + '/'+max); } else { $('#charNum').text(len + '/'+max); } }; </script> 

Answer 2

使用此代码对keyup事件中的字符进行计数。

  function count_up(obj) {
    var len = obj.value.length;
    $("span#numbers").text(len);
  };

Answer 3

考虑使用promise。 就像是：

function loadFile() {
  return new Promise((resolve, reject) => {
    try{
        //Function about loading file
        //...
        resolve(obj);
    } catch (e) {
        reject(e);
    }
  });
};

然后，您应该可以使用以下方法获得计数：

loadFile()  //Will do count_up after the text is loaded
    .then(function(obj){ 
         count_up(obj);
     })
    .catch((reason) => {
         console.log('Handle rejected promise ('+reason+') here.');
     });