将IE代码重写为FF代码 [英] Rewrite a IE Code to a FF Code
问题描述
这是代码（现在已满）：
HTML：
$ b $ p
$ b $ pre
code
函数highlight（elem）{
//存储光标位置
var cursorPos = document.selection.createRange（）。duplicate（）;
var clickx = cursorPos.getBoundingClientRect（）。left;
var clicky = cursorPos.getBoundingClientRect（）。top;
//复制div
的内容var content = elem.innerHTML;
var replaceStart ='';
var replaceEnd ='';
//只有替换/移动光标，如果有任何匹配
//注意空格 - 这可以防止重复
if（content.match（/ test /））{
elem.innerHTML = content.replace（/ test / g，''+ replaceStart +'test'+ replaceEnd +''）;
//重置游标和焦点
cursorPos = document.body.createTextRange（）;
cursorPos.moveToPoint（clickx，clicky）;
cursorPos.select（）;
$ b只是在IE上炒作，
任何人都可以调整这个代码，也可以在FF上工作！...
$ b $ p感谢
编辑[1]：
更多
这段代码用同一个单词格式替换一个特定的单词。 。
插入词（光标）始终保持在替换词后！ <<< 这是大的
但是只能在IE上工作，我很喜欢重写这个代码来使用FF ...但是我不能这样做...它太难了.. 。
任何人都可以帮忙吗？
b
：
我的问题是这部分：
//重设光标和焦点
cursorPos = document.body.createTextRange（）;
cursorPos.moveToPoint（clickx，clicky）;
cursorPos.select（）;
因为moveToPotion和select函数只能在IE上运行...直到那时容易...
FF上还有另一套功能，使它成为可能...但我不知道如何写另一个代码，做同样的事情。你知道吗？
你可以通过在当前位置插入一个标记元素来保留插入位置元素的 innerHTML 。 （顺便说一下，使用DOM方法遍历文本节点并搜索每个文本，比使用 innerHTML 更可取）。
只要插入符号不在文本这个单词的内部或旁边，下面的工作就可以了。我还添加了一个计时器，防止每次按下某个键时调用此函数，并等待用户停止键入半秒钟。
function insertCaretMarker（）{
var range;
var markerId =sel_+ new Date（）+_+（+ Math.random（））。substr（2）;
if（window.getSelection）{
var sel = window.getSelection（）;
range = sel.getRangeAt（0）;
range.collapse（true）;
var markerEl = document.createElement（span）;
markerEl.appendChild（document.createTextNode（\\\ ））;
markerEl.id = markerId;
range.insertNode（markerEl）;
} else if（document.selection&& document.selection.createRange）{
range = document.selection.createRange（）;
range.collapse（true）;
if（range.pasteHTML）{
range.pasteHTML（< span id = \+ markerId +\>& nbsp;< / span>）;
}
}
return markerId;
}
function restoreCaret（markerId）{
var el = document.getElementById（markerId）;
var range;
if（el）{
if（window.getSelection&& document.createRange）{
var sel = window.getSelection（）;
range = document.createRange（）;
range.setStartBefore（el）;
sel.removeAllRanges（）;
sel.addRange（range）;
} else if（document.body.createTextRange）{
range = document.body.createTextRange（）;
range.moveToElementText（el）;
range.collapse（true）;
range.select（）;
}
el.parentNode.removeChild（el）;
函数preserveCaretPosition（func）{
var id = insertCaretMarker（）;
func（）;
restoreCaret（id）;
}
var highlightTimer;
function highlight（elem）{
if（highlightTimer）{
window.clearTimeout（highlightTimer）;
}
highlightTimer = window.setTimeout（function（）{
highlightTimer = null;
var replaceStart ='< b>';
var replaceEnd ='< ; / b>';
//只替换/移动光标，如果匹配的话
//注意空格 - 这样可以防止重复
if（elem.innerHTML.match（/ test /）） {
preserveCaretPosition（function（）{
elem.innerHTML = elem.innerHTML.replace（/ test / g，''+ replaceStart +'test'+ replaceEnd +''）;
} ）;
}
}，500）;
}
This is the code (now is full):
HTML:
<div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div>
Javascript:
function highlight(elem){
// store cursor position
var cursorPos=document.selection.createRange().duplicate();
var clickx = cursorPos.getBoundingClientRect().left;
var clicky = cursorPos.getBoundingClientRect().top;
// copy contents of div
var content = elem.innerHTML;
var replaceStart = '';
var replaceEnd = '';
// only replace/move cursor if any matches
// note the spacebands - this prevents duplicates
if(content.match(/ test /)) {
elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' ');
// reset cursor and focus
cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();
}
}
Just woks on IE, unhapply. Anyone can 'adjust' this code, to work on FF too!...
Thanks
Edit[1]:
Div Editable and More... More
This code replaces a especific word by the same word formatted...
And the caret (cursor) stay always after the word replaced! <<< "This is the big"
But just works on IE, and I like so much to rewrite this code to work on FF... but I can't do it... Its so hard...
Anyone can help?
Edit[2]: My problem is just with this part:
// reset cursor and focus
cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();
Because, moveToPotion and select functions just works on IE... Until then it is easy... On FF there is another set of functions that make it possible... But i don't know how to write another code that do the same things. Do you got it?
You can preserve the caret position by inserting a marker element at its current location before doing your replacement on the element's innerHTML. (Using DOM methods to traverse the text nodes and searching each for the text you want would be preferable to using innerHTML, by the way).
The following works, so long as the caret is not positioned within or adjacent to the word "text". I also added a timer to prevent calling this function every time a key is pressed and to wait for the user to stop typing for half a second.
function insertCaretMarker() {
var range;
var markerId = "sel_" + new Date() + "_" + ("" + Math.random()).substr(2);
if (window.getSelection) {
var sel = window.getSelection();
range = sel.getRangeAt(0);
range.collapse(true);
var markerEl = document.createElement("span");
markerEl.appendChild(document.createTextNode("\u00a0"));
markerEl.id = markerId;
range.insertNode(markerEl);
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.collapse(true);
if (range.pasteHTML) {
range.pasteHTML("<span id=\"" + markerId + "\"> </span>");
}
}
return markerId;
}
function restoreCaret(markerId) {
var el = document.getElementById(markerId);
var range;
if (el) {
if (window.getSelection && document.createRange) {
var sel = window.getSelection();
range = document.createRange();
range.setStartBefore(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(el);
range.collapse(true);
range.select();
}
el.parentNode.removeChild(el);
}
}
function preserveCaretPosition(func) {
var id = insertCaretMarker();
func();
restoreCaret(id);
}
var highlightTimer;
function highlight(elem) {
if (highlightTimer) {
window.clearTimeout(highlightTimer);
}
highlightTimer = window.setTimeout(function() {
highlightTimer = null;
var replaceStart = '<b>';
var replaceEnd = '</b>';
// only replace/move cursor if any matches
// note the spacebands - this prevents duplicates
if (elem.innerHTML.match(/ test /)) {
preserveCaretPosition(function() {
elem.innerHTML = elem.innerHTML.replace(/ test /g, ' ' + replaceStart + 'test' + replaceEnd + ' ');
});
}
}, 500);
}
这篇关于将IE代码重写为FF代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
