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