html 中 SMS TextArea 的 Javascript 字符计数器

Posted 2023-05-07

【中文标题】html 中 SMS TextArea 的 Javascript 字符计数器

【英文标题】：Javascript Character Counter for SMS TextArea in html

【发布时间】：2018-11-03 14:02:04

【问题描述】：

我设计了短信发送页面来发送短信。我正在使用 javascript 显示从 160 开始倒数的字符数。问题是我不知道如何计算每 160 个字符后的短信数。

我在js函数中的代码：

function CountCharIndividual(txtIndividualMessage) 
        var count = document.getElementById(txtIndividualMessage).value.length;
        if (count > 1 && count <= 160) 
            document.getElementById('charstatus2').innerhtml = 160 - document.getElementById(txtIndividualMessage).value.length;
        
        if (document.getElementById(txtIndividualMessage).value.length > 160 - 1) 
            document.getElementById('charstatus2').innerHTML = "Maximum characters reached & now " + "showing new count: " + document.getElementById(txtIndividualMessage).value.length;
        
        if (document.getElementById(txtIndividualMessage).value.length >= 160) 
            document.getElementById('smsCount').innerHTML = 1;
        
    

它显示 smsCount 的 innerHTML 中的前 160 个字符，但此后不再增加。

【问题讨论】：

Count characters in textarea的可能重复

【参考方案1】：

试试下面的代码，如果有帮助的话

function CountCharIndividual(txtIndividualMessage) 

  var count = document.getElementById(txtIndividualMessage).value.length;
  var maxLength = 160;
  var smsCount = parseInt(count / maxLength);
  if (smsCount > 0) 
    document.getElementById('smsCount').innerHTML = smsCount;
   else 
    if (count > (maxLength - 1)) 
      document.getElementById('charstatus2').innerHTML = "Maximum characters reached & now " + "showing new count: " + count;
     else 
      document.getElementById('charstatus2').innerHTML = maxLength - count;
    

  

【参考方案2】：

你可以使用这个逻辑

var limit = 160;   // it will be fixed value
var charCount = 170  // it will be dynamic value

var result = Math.ceil(charCount/limit)

现在result将显示已消耗的短信数量。

【参考方案3】：

您需要计算文本框中的字符总数并将其除以消息长度，在您的情况下为 160 个字符

function CountCharIndividual(txtIndividualMessage) 
        var count = document.getElementById(txtIndividualMessage).value.length;
        if (count > 1 && count <= 160) 
            document.getElementById('charstatus2').innerHTML = 160 - count;
        
        if (document.getElementById(txtIndividualMessage).value.length > 160 - 1) 
            document.getElementById('charstatus2').innerHTML = "Maximum characters reached & now " + "showing new count: " + count;
        
        if (document.getElementById(txtIndividualMessage).value.length <= 160) 
            document.getElementById('smsCount').innerHTML = 1;
        
        else 
          document.getElementById('smsCount').innerHTML = (count - (count % 160)) / 160;
        
    

【讨论】：

@PrateekJahagirdar 你需要修改最后一个条件来计算短信数量，如下一行 document.getElementById('smsCount').innerHTML = (count - (count % 160)) / 160;

【参考方案4】：

我认为最后一个if condition 是原因。尝试如下

function CountCharIndividual(txtIndividualMessage) 
        var count = document.getElementById(txtIndividualMessage).value.length;
        if (count >= 1 && count <= 160) 
            document.getElementById('charstatus2').innerHTML = 160 - count;
        
        else if (count > 160 - 1) 
            document.getElementById('charstatus2').innerHTML = "Maximum characters reached & now " + "showing new count: " + count;
        
        else 
            document.getElementById('smsCount').innerHTML = parseInt(count / 160);
        
    

【讨论】：

我希望 'charstatus2' 中的每 160 个字符后，'smsCount' 增加 1。例如，如果 'charstatus2' = 160 则 'smsCount'=1 并且当 charstatus2=320 则 'smsCount'=2 等等

@PrateekJahagirdar 请尝试修改后的答案

而不是使用parseInt(document.getElementById(txtIndividualMessage).value.length / 160); 使用Math.ceil(document.getElementById(txtIndividualMessage).value.length / 160); 来获取计数

感谢 Anil kumar 先生解决了问题，但唯一的问题是它以十进制显示。

@PrateekJahagirdar 使用parseInt 来避免小数。请尝试使用答案的编辑代码