How to detect new row in textarea while typing without setting Line height using JQuery?

Question

Is there any way to detect in jQuery; whether new row got created in text area while end user is typing continuously in it? I could not set line height, max height of minheight of textarea.

Fiddle: http://jsfiddle.net/5wdzH/113/

Note: Here i am not asking about \n (Enter) but about new Row

   enteredText = $( this ).val();
   numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length; //When we press enter then only the value comes but not for new row.

Textarea attributes:

  $(e).css({'height': 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight);

Possible duplicate: http://stackoverflow.com/questions/1760629/how-to-get-number-of-rows-in-textarea — node_modules, Apr 19 '16 at 06:31
@MilindAnantwar: I dont think so; if i am typing continuosly without Enter then it will not return correct number of rows. — fatherazrael, Apr 19 '16 at 06:35
@MilindAnantwar i tried it it didnt count [demo](http://jsfiddle.net/5wdzH/114/) — guradio, Apr 19 '16 at 06:36
check this out, http://stackoverflow.com/questions/9185630/find-out-the-line-row-number-of-the-cursor-in-a-textarea — , Apr 19 '16 at 06:44

score 1 · Answer 1 · answered Apr 19 '16 at 07:42

I think best way to measure it will be counting number of columns of the text area and check if the number of characters entered exceeds that or not.This will not possibly hampered by wide letters or slim ones (except for one or two characters error margin).

var numberOfColumns = 0; var numberOfLines = 1;

First:

$( "#watched_textarea" ).each(function(){
        numberOfColumns = $(this).context.cols;
});

And then:

if (characterCount > numberOfColumns) {
    numberOfLines = parseInt(characterCount / numberOfColumns) + 1;
}

You can have a look - updated your fiddle: http://jsfiddle.net/5wdzH/116/

score 0 · Answer 2 · answered Apr 19 '16 at 07:16

0

There are two ways to do that 1) if you want to identify enter press then you can increase row counter if(e.keyCode == 13) { //increment row counter }

2) if you are using fixed width of textarea then you can count number of words can fit in one row. no of character divide this factor to will give you number of rows

i think this will help you

answered Apr 19 '16 at 07:16

sandesh jadhav

119
6

Number 2 will fail badly - check the width of 11111 versus 88888 - both 5 characters but 8s are much wider than 1s – StudioTime Apr 19 '16 at 07:27

How to detect new row in textarea while typing without setting Line height using JQuery?

2 Answers2