Javascript 需要将光标位置设置为contentEditable div的末尾,并发出选择和范围对象的问题
我暂时忘记了跨浏览器兼容性,我只是想让它工作。 我所做的是尝试修改位于找到基本脚本时的脚本(您可能不需要知道这一点)。基本上,当你输入字符时,它会将你输入的字符转换成希腊字符并打印到屏幕上。我想做的是让它在ContentEditableDiv上工作(它只适用于Textareas) 我的问题是这个函数:用户键入一个键,它被转换成希腊键,然后转到一个函数,它通过一些if进行排序,最后是我可以添加div支持的地方。这是我到目前为止得到的 myField是div,myValue是希腊字符Javascript 需要将光标位置设置为contentEditable div的末尾,并发出选择和范围对象的问题,javascript,range,getselection,Javascript,Range,Getselection,我暂时忘记了跨浏览器兼容性,我只是想让它工作。 我所做的是尝试修改位于找到基本脚本时的脚本(您可能不需要知道这一点)。基本上,当你输入字符时,它会将你输入的字符转换成希腊字符并打印到屏幕上。我想做的是让它在ContentEditableDiv上工作(它只适用于Textareas) 我的问题是这个函数:用户键入一个键,它被转换成希腊键,然后转到一个函数,它通过一些if进行排序,最后是我可以添加div支持的地方。这是我到目前为止得到的 myField是div,myValue是希腊字符 //Get s
//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。我可以在位置31处键入字符32,然后在位置32处键入字符33,但如果我尝试输入字符34,它会添加字符,并将光标设置回32。问题是,如果cursorPos大于范围中定义的值,则添加新字符的函数将出错。有什么想法吗?我想你可以把起始偏移设置在结束偏移之外 插入文字时,应先设置结束偏移,再设置开始偏移
rangeObj.setEnd(container, cursorPos);
rangeObj.setStart(container,cursorPos);
在contenteditable div中进行跨浏览器操作比在textarea中更容易。以下假设contenteditable div的id为“希腊语”
当我试着这么做的时候,它还是不起作用。我认为在这里使用range可能不是最好的解决方案。我有一个类似的例子,发现
range.collapse(false)
比setStart
+setEnd
更合适,但是你的建议是使用sel.removeAllRanges
,然后是sel.addRange
在WebKit浏览器上非常有用+我只是想说声谢谢,在努力工作了2个小时后发现了这个
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;
}
}