![如何在输入时格式化contenteditable]( "如何在输入时格式化contenteditable")
本文介绍了如何在输入时格式化contenteditable div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试编写一个函数，让用户在div中输入内容时，可以使用contenteditable div来进行一些自动格式化。到目前为止，我只能使它在IE中工作。任何人都可以帮助我？
pre $函数formatOnKeyUp（）{
if（window.getSelection）{
/ / ???????
} else if（document.selection）{
cursorPos = document.selection.createRange（）。duplicate（）;
clickx = cursorPos.getBoundingClientRect（）。left;
clicky = cursorPos.getBoundingClientRect（）。top;
}
text = document.getElementById（'div1'）。innerHTML;
text = text.replace（/ this / gm，< i> this< / i>）;
// ....一些其他格式在这里...
document.getElementById（'div1'）。innerHTML = text;
if（window.getSelection）{
// ????????
} else if（document.selection）{
cursorPos = document.body.createTextRange（）;
cursorPos.moveToPoint（clickx，clicky）;
cursorPos.select（）;
$ div $解析方案你可以在我的中使用。 //code.google.com/p/rangy/rel =nofollow> Rangy 库，它在选择边界使用不可见的标记元素。我还建议在一段时间的keboard不活动之后而不是每个 keyup 事件中进行更换：
function formatText（el）{
//保存选区
var savedSel = rangy.saveSelection（）;
//在此处设置格式
var text = el.innerHTML.replace（/ this / gm，< i> this< / i>）;
el.innerHTML = text;
//恢复原始选择
rangy.restoreSelection（savedSel）;
}
var keyTimer = null，keyDelay = 500; （keyTimer）{
window.clearTimeout（keyTimer）;
document.getElementById（'div1'）。onkeyup = function（）{
if
}
keyTimer = window.setTimeout（function（）{
keyTimer = null;
formatText（document.getElementById（'div1'））;
}，keyDelay ）;
};
I'm trying to write a function that allows a contenteditable div to do some auto formatting while the user is typing in the div. So far I only manage to make it work in IE. Anyone can help me?
function formatOnKeyUp(){
if (window.getSelection) {
// ???????
} else if (document.selection) {
cursorPos=document.selection.createRange().duplicate();
clickx = cursorPos.getBoundingClientRect().left;
clicky = cursorPos.getBoundingClientRect().top;
}
text = document.getElementById('div1').innerHTML;
text = text.replace(/this/gm, "<i>this</i>");
// .... some other formating here...
document.getElementById('div1').innerHTML = text;
if (window.getSelection) {
// ????????
} else if (document.selection) {
cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();
}
}
解决方案
You could use the selection save and restore module in my Rangy library, which uses invisible marker elements at the selection boundaries. I'd also suggest doing the replacement after a certain period of keboard inactivity rather than on every keyup event:
function formatText(el) {
// Save the selection
var savedSel = rangy.saveSelection();
// Do your formatting here
var text = el.innerHTML.replace(/this/gm, "<i>this</i>");
el.innerHTML = text;
// Restore the original selection
rangy.restoreSelection(savedSel);
}
var keyTimer = null, keyDelay = 500;
document.getElementById('div1').onkeyup = function() {
if (keyTimer) {
window.clearTimeout(keyTimer);
}
keyTimer = window.setTimeout(function() {
keyTimer = null;
formatText(document.getElementById('div1'));
}, keyDelay);
};
这篇关于如何在输入时格式化contenteditable div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！