Имам 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), ако е приложимо: Как мога да приложа функцията, която симулира промяна на знака, свързан с ключ, дори към текстови полета за въвеждане тип=?
Моето приложение на този код е, че това е арт проект. Докато потребителят въвежда, изходът на екрана се редува между класически текст (в този случай Омировата Одисея) и това, което потребителят всъщност въвежда.
Съжалявам, ако публикацията е много дълга, но исках да включа възможно най-много информация.