Question

我有一个具有“可编辑”ID的contenteditable div，其中我模拟了更改与键事件关联的字符。你可以在这里看到它：http://jsfiddle.net/Ukkmu/66/

如您所见，无论用户按哪个字母数字键，输出字符串为“Singinme”。在div中输入。我的var列表中的单词之间的空格将被忽略。我希望输出包含空格，并阅读“在我身上唱歌”。因为它目前写在我的javascript代码的第一行。我已经得到帮助至少确定我的问题在insertTextAtCursor函数中，但是如何更改该函数以包含空格作为可接受的输出字符？或者，我是否可以以“在我身上唱歌”的方式重新编写我的var列表。在div？

为方便起见，我也粘贴了以下的javascript。

PS：我刚刚发现这是一个浏览器问题。在Chrome中，就像我描述的那样。在IE中它按照我的意愿工作 - “在我里面唱歌”。有空格。有关如何在Chrome中使用此功能的任何想法？我不知道它是否适用于Firefox。

var list = "Sing in me.".split('');
function transformTypedCharacter(charStr) {
    return (/[a-zA-Z]/).test(charStr) ? list.shift()||" " : charStr;
}

function insertTextAtCursor(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);
    }
}


$("#editable").keypress(function(evt) {
    if (evt.which) {
        var charStr = String.fromCharCode(evt.which);
        var transformedChar = transformTypedCharacter(charStr);
        if (transformedChar != charStr) {
            insertTextAtCursor(transformedChar);
            return false;
        }
    }
});

Answer 1

Chrome吞噬了空白节点。我不知道这是不是一个错误，因为似乎多个浏览器对空白和空节点的处理方式不同。

在您的情况下，一个简单的解决方案是使用非中断空格。这是：

var list = "Sign\xA0in\xA0me.".split("");

或者

var list = "Sign in me.".replace(/\s/g, "\xA0").split("")

Answer 2

这不是关于空格，对于该检查的解决方案@Alexander's great response。这是关于代码中的其他问题。

首先，您只匹配a-z和A-Z个输入字符。与此同时，您不会替换periods，space，numbers，non-ascii字母等按键。其次，不应该移动数组，而应该在输入中的位置查找字符。使用您的代码，您可以删除文本，然后不会再次替换它。

function transformTypedCharacter(charStr) {
    var position = $("#editable").text().length;
    if (position >= list.length) return '';
    else return list[position];
}

将其与亚历山大的答案和you're home free配对！

将空格包含为可接受的输出字符

2 个答案: