Geek asks and answers

Automatically move the cursor in Textarea

My question is almost like Automatic newline in textarea in textarea, but my context is more complicated. I have several text areas that have a 1 line attribute, which gives the impression of writing in the air (it simply means an empty place on a website without borders, since the textarea border that I set in css is like → border: 0;) .

I would like to use jQuery or Javascript to calculate when the text is entered by the user, if he has reached the end of the line of the text field, to automatically go to the next text field below. One way to solve this problem is to try to count the characters, but different characters have different widths.

I'm going to insert a hidden element at the edge of the text fields to act as a trigger for the nexttextarea.focus () event , but I don't know how I can achieve this.

I tried to figure it out and think of different hacks, but only one seems to be the solution ... Try to save each character in an array and give them a default space that takes a value in px ... for example 'a' => 0.7px, ' b '=> 0.9px or something like that if their list is somewhere (although it seems that from a memory point of view it would take a lot of overhead, as I would have to store both capital and small letters and many other characters .) Then do some calculations depending on the width of the browser if it has been resized or if not full size to determine when the width of the textarea line is filled with the edge of the browser width, (Currently the width of textarea is 100% and has no parent, therefore it fills the entire width of the browser).

If anyone has an idea for a complicated or easy way, I can do it, help me. The big problem is that IE and Mozilla introduce scrollbars if the browser window is resized and scrollbars are what I never want the user to see (remember how thin text is printed).

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

+3
source share
3 answers

This is harder than it sounds. Try checking scrollHeight and scrollWidth of the text field; if they change, the text overflows. At this point, you can move the text from the end of the current text field to the beginning of the next text field until the scroll height / width disappears.

Here is 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/

, keyup, , . , , (, "" ).

+1

, : , HTML

textarea. , , , , .

0

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

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

0
source

More articles:


All Articles