Had a idea and now trying to make it happen.
Idea: Have a HTML page with several inputs with CSS to make it look liked lined paper. Than at the end of each line move the focus from one input to the next so the user can continue input on a page mimicking lined paper.
Problem: Have no way of detecting or capturing an event when the input reaches the end of the line, thus no way to move the focus from one field to the next.
I tried using the maxlength attribute on the inputs but this didn’t work because of course some letters are wider than others so the lines never truly ‘filled up’
Possible solution: change inputs to divs with a inner span wrapping the text, compute width of span on keyup event and match it to the overall width of the div, if greater than do work to trim text and move text & focus to the next div.
Problem with that is its messy, and could cause bad performance on the page depending on the amount of lines i decide to use.
Question: Is there any event I can grab from the input when the end of the viewable area has been reached to be able to fire my function?? OR maybe someone could have a better idea of how to implement this?? OR am i trying to recreate the wheel and something for this has already been written (i couldn’t find anything on Google)??
On each keyup trigger a function to count the number of characters in the input field. If you reach your limit move focus to next line 🙂