Autotab contenteditable div или добавление функции к типу ввода: текст

У меня есть 3 contenteditable div. Первый и третий элементы div имеют функцию, которая имитирует изменение символа, связанного с событием клавиши, ввод предварительно запрограммированной строки по мере того, как пользователь вводит текст, а второй элемент div является простым — то, что пользователь вводит, отображается в элементе div. Это можно увидеть здесь: http://jsfiddle.net/vRXph/4/. Я включил код для первого div здесь для удобства:

var list1 = "Sing in me, Muse, and through me tell the story".replace(/\s/g,
 "\xA0").split("")
function transformTypedCharacter1(charStr) {
    var position = $("#verse1").text().length;
    if (position >= list1.length) return '';
    else return list1[position];
}

function insertTextAtCursor1(text) {
    var sel, range, textNode;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            range.deleteContents();
            textNode = document.createTextNode(text);
            range.insertNode(textNode);

            // Move caret to the end of the newly inserted text node
            range.setStart(textNode, textNode.length);
            range.setEnd(textNode, textNode.length);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(text);
    }
}


$("#verse1").keypress(function(evt) {
    if (evt.which) {
        var charStr = String.fromCharCode(evt.which);
        var transformedChar = transformTypedCharacter1(charStr);
        if (transformedChar != charStr) {
            insertTextAtCursor1(transformedChar);
            evt.preventDefault();
            return false;
        }
    }
});

Я хочу автоматически переключаться между этими div. В первом div функция автозакладки будет вызываться после того, как будет введен последний запрограммированный символ, а для второго div автозакладка будет вызываться после определенного количества символов (скажем, 5 символов, просто для краткости, как контрольная работа).

Мой первый вопрос (из 3): как сделать автоматическую вкладку между редактируемыми элементами div?
Я нашел способ автоматической вкладки между типом ввода: текстовые поля здесь: http://jsfiddle.net/Ukkmu/73/, но я не могу применить это к своим элементам div. Я попытался и не смог сделать это здесь: http://jsfiddle.net/Ukkmu/76/.

    function auTab (currentDiv, currentDivSize, currentDivLength, nextDiv) {
    if(currentDivSize == currentDivLength){
        $('#' + currentDiv).next().focus();
    };
};

$('div[id^="verse"]').keyup(function() {
    var thisDiv = $(this).attr('id');
    var thisDivSize = $(this).attr('size');
    var thisDivLength = $(this).val().length;

    auTab(thisDiv, thisDivSize, thisDivLength);
});

Как видите, система просто игнорирует функцию автозакладки. Я создал размер «5» на своем первом div в качестве теста. Я не знаю, возможно ли это, но я сделал это, потому что увидел, что функция автозакладки зависит от размера. Мой второй вопрос (из 3): могу ли я назначить атрибут size или maxlength редактируемому элементу div? Если бы я мог, и если автотабуляция полагается на этот атрибут, то я бы просто назначил размер первого div равным количеству символов в моей предварительно запрограммированной строке (а для второго div я бы назначил 5 символов в качестве теста, как я упоминал выше).

Альтернативой было бы изменить мои contenteditable divs на тип ввода: текстовые поля. Я сделал это здесь: http://jsfiddle.net/Ukkmu/74/, но как вы можете см. мою исходную функцию, которую я описал в первом абзаце этого вопроса, больше не работает. Я получаю повторяющийся символ ("S" из моей предварительно запрограммированной строки) перед первым полем вместо моей предварительно запрограммированной строки в первом поле. Для этого теста я поставил размер поля равным 3, просто в качестве теста. Окончательная версия будет иметь размер всей предварительно запрограммированной строки. Мой третий вопрос (из 3), если применимо: как я могу применить функцию, которая имитирует изменение символа, связанного с клавишей, даже для текстовых полей типа ввода =?

Мое применение этого кода в том, что это художественный проект. Когда пользователь печатает, вывод на экран чередуется между классическим текстом (в данном случае Одиссея Гомера) и тем, что пользователь на самом деле печатает.

Извините, если это очень длинный пост, но я хотел включить как можно больше информации.


person Anthony    schedule 28.10.2012    source источник


Ответы (1)


Мое решение, благодаря pckill, отвечает на вопрос 3. Я использовал тип ввода: текстовые поля со следующей функцией:

var list1 = "This is a test.".replace(/\s/g, "\xA0").split("")
function transformTypedChar1(charStr) {
    var position = $("#verse1").val().length;
    if (position >= list1.length) return '';
    else return list1[position];
}
person Anthony    schedule 01.11.2012