Javascript通过“输入”计算文本区域内的文本数量

Posted 2023-05-07

【中文标题】Javascript通过“输入”计算文本区域内的文本数量

【英文标题】：Javascript to count number of texts within textarea by "enter"

【发布时间】：2016-12-13 21:53:27

【问题描述】：

您能否告知如何通过按“enter”来计算 textarea 中的文本数量。

Textarea 可以这样创建：

 <textarea name="ta1" id="ta1" rows="4" cols="50">
 ABC[enter]
 DEF[enter]
 GHI[enter]
 </textarea>
 <input type="text" name="textnumber" value="">

然后“textnumber”将立即显示“3”。谢谢。

【问题讨论】：

enter 你的意思是newline？

是的，回车就是换行

您好，如果您发现一些答案有帮助并且可以解决您的问题，请将其作为正确答案。提前致谢

【参考方案1】：

尝试以这种方式进行

function getEntersCount(textarea, result) 
   var text = textarea.value,
       enters = text.split(/\r|\r\n|\n/),
       count = enters.length;

   result.value = count;


getEntersCount(
    document.getElementById("ta1"), 
    document.querySelector('[name="textnumber"]')
);

猜猜这会对你有所帮助

编辑 1

getEntersCount(
    document.getElementById("ta1"), 
    document.getElementById('textnumber')
);

编辑 2

// Function will take text and return count of lines in it
function getEntersCount(text) 
    var enters = text.split(/\r|\r\n|\n/),
        count = enters.length;       
    return count;


// Usage example
var count = getEntersCount(document.getElementById("ta1").value) 
console.log(count);

【讨论】：

谢谢。但是我使用另一个javascript函数通过使用document.getElementById（'textnumber'）.value来粘贴“textnumber”值，所以我无法触发该函数。但是怎么做呢？

是您需要的方法吗？

不要忘记在代码中添加 getEntersCount 函数

对不起，我之前说错了。我使用另一个javascript函数通过使用document.getElementById('ta1').value（即多行中的值）粘贴“ta1”值，所以我无法触发该函数。如何触发您的功能而不是使用 keyup 或 keydown？

我的意思是一旦 textarea 有值，函数就会自动工作。那怎么办？

【参考方案2】：

之前有人问过这个问题 (see here)。

您可以使用正则表达式来查找字符串中换行符的数量。 要匹配的模式是：/\n/g 表示换行符的出现次数

见this。

【参考方案3】：

要计算文本区域中换行符的数量，您必须：

获取textarea的值var val = document.querySelector('textarea').value

然后数\n（换行）var res = val.match(/\n/g).length

要绑定结果并使其在输入中可视化，您可以将此过程包装在一个函数中，以便在每次 textarea 更新时调用，

试试这个：

var tarea = document.querySelector('textarea')
var input = document.querySelector('input')

function update() 
  var res = (tarea.value.match(/\n/g)) ? tarea.value.match(/\n/g).length : 0;
  //                 ^^^^^^
  //          this is a ternary (like a conditional check)
  input.value = res;


tarea.addEventListener('input', update)

<textarea name="ta1" id="ta1" rows="4" cols="50">
  ABC DEF GHI
</textarea>
<input type="text" name="textnumber" value="0">

【讨论】：

谢谢。但是是否可以调整为：“textnumber”的原始值为0，只有在按下“enter”后才会更新该值。

你可以输入一个起始value="0"

但是当我尝试删除textarea中的所有内容时，“textnumber”框返回1而不是0。

实际上，如果没有换行符我得到一个错误...我添加了一个条件检查，如果没有找到\n，则值为0

谢谢。但是我使用另一个javascript函数通过使用document.getElementById（'textnumber'）.value来粘贴“textnumber”值，所以我无法触发该函数。但是怎么做呢？