【问题标题】:Javascript to count number of texts within textarea by "enter"Javascript通过“输入”计算文本区域内的文本数量
【发布时间】: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
  • 是的,回车就是换行
  • 您好,如果您发现一些答案有帮助并且可以解决您的问题,请将其作为正确答案。提前致谢

标签: javascript text textarea enter


【解决方案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”值,所以我无法触发该函数。但是怎么做呢?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-25
    • 2015-06-08
    • 1970-01-01
    • 2018-06-13
    • 2013-04-14
    • 2020-03-21
    相关资源
    最近更新 更多