5

我暂时忘记了跨浏览器兼容性，我只想让它工作。我正在尝试修改位于typegreek.com的脚本（您可能不需要知道这一点）。基本脚本位于此处。基本上它的作用是当您输入字符时，它将您输入的字符转换为希腊字符并将其打印到屏幕上。我想要做的是让它在 contentEditable div 上工作（它只适用于 Textareas）

我的问题在于这个函数：用户键入一个键，它被转换为一个希腊键，然后转到一个函数，它通过一些 if 进行排序，最后是我可以添加 div 支持的地方。这是我到目前为止所拥有的，

myField 是 div，myValue 是希腊字符。

//Get selection object...
var userSelection
 if (window.getSelection) {userSelection = window.getSelection();}
 else if (document.selection) {userSelection = document.selection.createRange();}

//Now get the cursor position information...
var startPos = userSelection.anchorOffset;
var endPos = userSelection.focusOffset;
var cursorPos = endPos;

//Needed later when reinserting the cursor...
var rangeObj = userSelection.getRangeAt(0) 
var container = rangeObj.startContainer

//Now take the content from pos 0 -> cursor, add in myValue, then insert everything after myValue to the end of the line.
myField.textContent = myField.textContent.substring(0, startPos) + myValue + myField.textContent.substring(endPos, myField.textContent.length);

//Now the issue is, this updates the string, and returns the cursor to the beginning of the div. 
//so that at the next keypress, the character is inserted into the beginning of the div.
//So we need to reinsert the cursor where it was.

//Re-evaluate the cursor position, taking into account the added character.
  var cursorPos = endPos + myValue.length;

  //Set the caracter position.
  rangeObj.setStart(container,cursorPos)

现在，这只有在我输入的内容不超过原始文本的大小时才有效。假设我事先在 div 中有 30 个字符。如果我输入超过 30 个字符，它会添加字符 31，但会将光标放回 30。我可以在 pos.31 处键入字符 32，然后在 pos.32 处键入字符 33，但是如果我尝试将字符 34 输入，它添加字符，并将光标设置回 32。问题是如果 cursorPos 大于范围中定义的值，则添加新字符的函数会出错。有任何想法吗？

4

2 回答 2

17

在 contenteditable div 中执行此跨浏览器比在 textarea 中更容易。以下假设您的 contenteditable div 的 id 为“greek”。

var greekChars = {
    "a": "\u03b1"
    // Add character mappings here
};

function convertCharToGreek(charStr) {
    return greekChars[charStr] || "[Greek]";
}

function insertTextAtCursor(text) {
    var sel, range, textNode;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            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);
    }
}

var div = document.getElementById("greek");

div.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
    if (charCode) {
        var charStr = String.fromCharCode(charCode);
        var greek = convertCharToGreek(charStr);
        insertTextAtCursor(greek);
        return false;
    }
}
于 2010-05-31T11:39:09.960 回答
0

我认为您可能将开始偏移量设置为超出结束偏移量。

插入文本时，应先设置结束偏移，然后再设置开始偏移。

rangeObj.setEnd(container, cursorPos);
rangeObj.setStart(container,cursorPos);
于 2010-05-31T01:55:27.243 回答