我暂时忘记了跨浏览器兼容性,我只想让它工作。我正在尝试修改位于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 大于范围中定义的值,则添加新字符的函数会出错。有任何想法吗?