Question

我有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之间进行autotab。在第一个div中，autotab函数将在输入最终预编程字符后调用，而对于第二个div，autotab将在一定数量的字符后调用（比如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);
});

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

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

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

很抱歉，如果这是一篇很长的帖子，但我希望尽可能多地提供信息。

Answer 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];
}

Autotab contenteditable divs或添加函数输入类型：文本

1 个答案: