自动Textarea光标移动

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 .

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 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 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 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.

Answer 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 (eg through a top level "edit" menu).

Answer 2

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 .

Answer 3

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