Autotab contenteditable divs или добавяне на функция към типа на въвеждане: текст

Имам 3 доволни divs, които могат да се редактират. Първият и третият 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;
        }
    }
});

Искам автоматично разделяне между тези divs. В първия div функцията autotab ще бъде извикана, след като бъде въведен последният предварително програмиран знак, а за втория div autotab ще бъде извикана след определен брой символи (да кажем 5 знака, само за да бъде кратък като тест).

Първият ми въпрос (от 3): Как да правя автоматичен таб между div с възможност за редактиране на съдържание?
Намерих начин да правя автоматичен таб между текстови полета тип въвеждане тук: http://jsfiddle.net/Ukkmu/73/, но изглежда не мога да приложа това към моите divs. Опитах се и не успях да направя това тук: 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 на contenteditable div? Ако мога и ако автоматичното табулиране разчита на този атрибут, тогава просто бих присвоил размера на първия div да бъде броя на знаците в моя предварително програмиран низ (а за втория div бих присвоил 5 символа като тест, както споменах по-горе).

Алтернатива би била да променя моите contenteditable divs на input type: текстови полета. Направих това тук: http://jsfiddle.net/Ukkmu/74/, но както можете вижте моята оригинална функция, която описах в първия параграф на този въпрос, вече не работи. Завършвам с повтарящ се знак („S“ от моя предварително програмиран низ) преди първото поле, вместо моя предварително програмиран низ в първото поле. За този тест поставих размера на полето като 3, просто като тест. Крайната версия ще бъде с размера на целия предварително програмиран низ. Моят 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