0

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

如您所见，无论用户按什么字母数字键，都会输出“Singinme”字符串。在 div 中输入。我的 var 列表中单词之间的空格被忽略。我希望输出包含空格，并阅读“Sing in me”。因为它目前写在我的 javascript 代码的第一行。我得到了帮助，至少可以确定我的问题出在 insertTextAtCursor 函数中，但是如何更改该函数以包含空格作为可接受的输出字符？或者，我是否可以重新编写我的 var 列表，将其键入为“Sing in me”。在 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;
        }
    }
});

​</p>

4

2 回答 2

2

Chrome 吞下空白节点。我无法判断这是否是一个错误，因为似乎多个浏览器对空白和空节点的处理方式不同。

在您的情况下，一个简单的解决方案是使用不间断空格。那是：

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

或者

var list = "Sign in me.".replace(/\s/g, "\xA0").split("")
于 2012-10-26T17:55:11.600 回答
1

这与空间无关，为了解决这个问题，请检查@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];
}

将其与亚历山大的答案配对，您就可以自由回家了！

于 2012-10-26T17:47:56.100 回答