0

could you please inform how the number of texts can be counted within textarea by pressing "enter".

Textarea can be created like this:

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

Then "textnumber" will show "3" instantaneously. Thanks.

CKH
  • 133
  • 9

3 Answers3

1

Try do that in this way

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"]')
);

Guess this will help you

EDIT 1

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

EDIT 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);
Den Kison
  • 1,074
  • 2
  • 13
  • 28
  • Thank you. But I used another javascript function to paste the "textnumber" value by using document.getElementById('textnumber').value, so I cannot trigger the function. But how? – CKH Aug 22 '16 at 14:50
  • Is it the approuch that you need? – Den Kison Aug 22 '16 at 15:14
  • Don`t forget to add getEntersCount function in your code – Den Kison Aug 22 '16 at 15:15
  • Sorry, I say wrong previously. I used another javascript function to paste the "ta1" value by using document.getElementById('ta1').value (i.e. the value in multiple rows), so I cannot trigger the function. How do I trigger your function instead of using keyup or keydown? – CKH Aug 22 '16 at 23:25
  • I mean once the textarea has value, the function automatically works. Then how? – CKH Aug 23 '16 at 13:24
0

This question has been asked before (see here).

You can use Regex to find the number of newlines in a string. The pattern to match is: /\n/g which means the number of occurances of a newline

See this.

Community
  • 1
  • 1
Guy Waldman
  • 457
  • 3
  • 12
0

To count the number of newlines in the textarea you have to :

  • get the value of textarea var val = document.querySelector('textarea').value

  • then count \n (newline) var res = val.match(/\n/g).length

To bind the result and have it visualized in your input you can wrap this process in a function to be called on every textarea update,

try this:

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">
maioman
  • 18,154
  • 4
  • 36
  • 42
  • Thanks. But can it be adjusted as: The original value of "textnumber" is 0. The value is updated only after pressing "enter". – CKH Aug 08 '16 at 08:39
  • you can just enter a starting `value="0"` – maioman Aug 08 '16 at 08:44
  • But when I tried to delete all contents in the textarea, the "textnumber" box returns to 1 instead of 0. – CKH Aug 08 '16 at 08:54
  • actually, if there were no newlines I was getting an error... I added a conditional check, in case no `\n` are found the value is `0` – maioman Aug 08 '16 at 09:01
  • Thank you. But I used another javascript function to paste the "textnumber" value by using document.getElementById('textnumber').value, so I cannot trigger the function. But how? – CKH Aug 22 '16 at 14:50