0

我有 3 个可内容编辑的 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 中，autotab 函数将在输入最终的预编程字符后调用，而对于第二个 div，autotab 将在一定数量的字符后调用（假设为 5 个字符，只是为了保持简短测试）。

我的第一个问题（共 3 个）：如何在 contenteditable 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);
});

如您所见，系统只是忽略了 autotab 功能。我在我的第一个 div 上创建了一个大小为“5”的测试。我不知道这是否可能，但我这样做是因为我看到 autotab 功能取决于大小。我的第二个问题（共 3 个）是：我可以为 contenteditable div 分配 size 或 maxlength 属性吗？如果可以的话，并且如果 autotabbing 依赖于这个属性，那么我只需将第一个 div 的大小指定为我预编程字符串中的字符数（对于第二个 div，我会指定 5 个字符作为测试，正如我上面提到的）。

另一种方法是将我的 contenteditable div 更改为输入类型：文本字段。我在这里做了这个：http: //jsfiddle.net/Ukkmu/74/，但是你可以看到我在这个问题的第一段中描述的原始功能不再有效。我最终在第一个字段之前有一个重复的字符（我的预编程字符串中的“S”） ，而不是我在第一个字段中的预编程字符串。对于这个测试，我将字段的大小设置为 3，只是作为测试。最终版本将是整个预编程字符串的大小。我的第三个问题（共 3 个）（如果适用）：如何应用模拟更改与键关联的字符的功能，甚至输入 type= 文本字段？

我对这段代码的应用是这是一个艺术项目。当用户键入时，屏幕上的输出会在经典文本（在本例中为 Homer's The Odyssey）和用户实际键入的内容之间交替。

抱歉，如果这是一篇很长的帖子，但我想包含尽可能多的信息。

4

1 回答 1

0

感谢 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];
}
于 2012-11-01T01:17:16.073 回答