How to count lines in Text Box?

Ask the community
,
1

I would like to know how many lines the user has inputed into a text box, including lines created by the text being longer than the width of the box (so counting line breaks won’t work).

I thought this approach would work:

$w.onReady(function () {
$w('#textBox1').wrap = "hard"
});

export function textBox1_change(event) {
let str = $w('#textBox1').value
let lines = str.split(/\r\n|\r|\n/).length
}

Setting .wrap to “hard” doesn’t seem to add the line breaks in the value. I may have missunderstood the documentation https://www.wix.com/corvid/reference/$w.TextBox.html#wrap

Am I missing something (perhaps in my regex)?

(I also tried getting the html value (via assigning the Text Box value to a text element).

Any other suggestion to count the displayed lines would be welcome. Thanks

2 
$w.onReady(function () {
$w('#textBox1').wrap = "hard";
});

export function textBox1_change(event) {
let str = $w('#textBox1').value;
let lines = str.split('\n').length;
}

This will give you the number of lines. But only if there’s a line break.

3

Thanks, any ideas for how to get the number of lines including the lines created by word wrap in the input box?

4

I don’t think it’s possible.
Maybe you can calculate the textbox width and the font size and guess the number of lines, but I don’t think it’s going to be accurate.

5

The reason I want to do this is to stop the user putting to much text in a box that is going to be printed. I could do this by setting the size of the box, and getting the user not to type beyond the bottom of the box. Is there a way to disable scroll on the text box, so that they can’t keep on typing? Or to alert if they start scrolling?

6

You cannot control the scrolling or create such an alarm (maybe if you create a Custom Element of your own, you’ll be able to do it).

If you use Wix’s textbox, you can limit the input to X characters. You can also decide that an explicit line break is equal to Y characters.
Once the users reach the limit, don’t let them type any more, and create a message in accordance.

7

Thanks for your help @jonatandor35 the issue with your proposal (as I think you know) is that the explicit line break could happen at the beginning or end of the line. I’ve decided to use a seperate text box so the value then shows in a text element, and the user can see more clearly what is happening.