Automatic Textarea cursor movement

Question

My question is almost similar to Automatic newline in textarea in textarea but my context is more complex. I have multiple textareas which have a 1 row attribute thus giving an impression of writing on air(just meaning empty area on the website with no borders since the textarea border i have set in css as >>> border: 0;).

I would like to use JQuery or Javascript to calculate when the text entered by the user if he/she has reached the end of the row of the textarea so as to automatically move to the next textarea below. One way to solve this would be to try and count the characters but different characters have different widths.

I'm thinking of inserting a hidden element at the edge of the textareas to act as a trigger for the nexttextarea.focus() event but i have no idea of how i can achieve this.

I have tried goofing around and thinking of different hacks but only one seems to be the solution... Try to store each character in an array and give them their default space taking value in px...like 'a'=>0.7px,'b'=>0.9px or something of the sort if their is a list somewhere (although it looks like it would take a lot of overhead in terms of memory as i would have to store both capital, small letters and many other characters.) Then do some calculations depending on the width of the browser if it has been re-sized or if not the full size to determine when the textarea row width becomes full at the browser width edge. (For the time being the textarea width is 100% and has no parent therefore fills the whole browser width).

If anybody has an idea of a complex or simple way i can accomplish this, help me. A big problem is that IE and Mozilla introduce scroll-bars if the browser window is re-sized, and scroll-bars is what i never want the user to see(remember impression of typing into thin air).

Forgive me for being so verbose..just wanted to be accurate and detailed.

Dagg Nabbit · Accepted Answer · 2012-05-20T19:00:52.800

1

This is harder than it looks. Try checking the scrollHeight and scrollWidth of the textarea; if they changed, the text overflowed. At that point, you can move text from the end of the current textarea to the beginning of the next textarea until the scroll height/width goes away.

Here's an example:

document.onkeyup = function(evt) {
    var event = evt || window.event;
    var target = event.target;
    var nextArea = target.nextSibling; // assumes no whitespace between textareas.
    var chars;
    if (target.tagName == 'TEXTAREA' && (target.scrollLeft || target.scrollTop)) {
        chars = 0;
        while (target.scrollLeft || target.scrollTop) {
            target.value = target.value.replace(/.$/, function(m0) {
                nextArea.value = m0 + nextArea.value;
                return '';
            })
            ++chars;
            target.selectionStart = target.value.length;
        }
        nextArea.focus();
        nextArea.selectionStart = chars;
    }

}

http://jsfiddle.net/L73RG/3/

Note that a fully-working solution will need to bind this to more than just keyup events, because the user can paste with the context menu, for example. You may want to bind it to some mouse events or even run it occasionally on a timer if you find the box can be modified without triggering events (e.g. through a top level "edit" menu).

edited May 20 '12 at 19:00

answered May 20 '12 at 00:28

Dagg Nabbit

75,346
19
113
141

checked out the jsfiddle.net link, but it seems to have a problem. On writing, the words that have extended the width of the textarea only go to a new line on the same textarea. If you write more than 2 lines, the scrollbars appear for the focused textarea. Maybe i did not fully comprehend the code, so is there a fix for that? – William The Dev May 20 '12 at 18:07
@RedCoder, it worked for me on chrome, although the code is quick and dirty and can definitely be improved. What browser are you using? I'll try it in that browser and see if I can fix it up. One problem with the current code is it breaks words in the middle if it runs out of space, but that's pretty easily fixed. Another problem is with resizing the window, a la windows notepad. – Dagg Nabbit May 20 '12 at 18:23
By the way, may I ask why you're doing this instead of just using one big textarea? It's an interesting puzzle, but I can't really see a good use for this. – Dagg Nabbit May 20 '12 at 18:28
it's mozilla 12.0....ok. Lemme give you the link for the implementation. Check the source. www.redcoder.allalla.com – William The Dev May 20 '12 at 18:35
@RedCoder adding `height: 1em;` to the CSS fixed it for me in Firefox: http://jsfiddle.net/L73RG/2/ Basically the idea is that if the text overflows the visible textarea, the textarea will scroll. As long as the textarea is scrolled, remove characters from it and add them to the beginning of the next textarea. – Dagg Nabbit May 20 '12 at 18:50
If you just want a "lined paper" look for your textarea, you could consider trying a pure CSS approach, giving it a background image and a large line-height to match. – Dagg Nabbit May 20 '12 at 18:55
N then arises another problem... maybe the event trigger(onkeyup) isn't so suitable for this. If you press a letter without releasing it just continues on and on in the same textarea without going to the next textarea. Although i can't think of another more suitable trigger...about the pure css approach, could you explain more on that?Thanks. – William The Dev May 20 '12 at 19:08
@RedCoder right, the keyup event is not perfect, and there's not really a great alternative... the user could also click in the box and then go to edit->paste in the menu, there's no event triggered for that at all as far as I know. The css approach would be to simply create a background image with horizontal lines, then create one large textarea with that image as its background, and the line-height set exactly to the distance between the lines in your image. – Dagg Nabbit May 20 '12 at 19:13
You could consider binding it to the `scroll` event of each textbox, actually, but you'd have to add code to ignore scroll events that are generated while your code is doing its work, or you'd probably end up in an infinite loop... – Dagg Nabbit May 20 '12 at 19:17
Yeah..i kinda figured that it would involve some really complex stuff. But it looks like what i need may not be covered in the language itself. I'm majorly back-end so your help has been invaluable, i'll pursue the css option if it's feasible. The many textareas option was nice because it only needed about 6 lines of php code the loop inclusive. Will that be possible with the css option and if so just some few lines of code of how it should be done will suffice to help me understand. – William The Dev May 20 '12 at 19:27
@RedCoder I'm thinking of something more or less like this: http://jsfiddle.net/bhAK8/ – Dagg Nabbit May 20 '12 at 20:23

score 0 · Answer 2 · edited May 23 '17 at 10:09

0

Check on every keypress if the content of your textarea is overflowing with the answer provided to this question: Determine if an HTML element's content overflows

You'll then have to remove the extra characters and put them into the next textarea. Probably one by one, using your check overflow function after each character is moved to see if the text area is still overflowing.

edited May 23 '17 at 10:09

Community

1
1

answered May 19 '12 at 23:46

Matthew

8,183
10
37
65

score 0 · Answer 3 · answered May 19 '12 at 23:49

A possible solution is to measure the size of the text. Ext-JS does it by creating an offscreen absolutely positioned div, giving it style properties for the font you want to measure, and them measuring the div itself.

You can use Ext-JS's code as inspiration http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.TextMetrics

Automatic Textarea cursor movement

3 Answers3