当编辑区没有获得焦点或光标处range为空时,点击加粗按钮,在光标处添加一个strong标签,之后把光标移动到strong标签内,现在在移动光标的过程出现了问题。
var frag = range.createContextualFragment(“<strong></strong>”)
var lastNode = frag.lastChild
range.insertNode(frag)
range.setStartAfter(lastNode)
?
这里添加的strong标签是空,如果strong里加入一个 就可以获得lastChild,但现在它的lastChild是null,这样在setStartAfter时就找不到参照的lastNode对象了。
这里该如何创建空strong标签,或如何获取strong下参照节点。收起
点击加粗按钮后,在编辑区添加一个strong标签,把光标移动到strong内,继续输入时直接到strong内
如果strong内部有节点,比如文本或标签,那么frag.lastChild就会获得最后一个标签或文本节点,假设创建的是这样的标签
<strong>nbsp</strong>
那执行insertNode后插入的html将是
光标<strong>nbsp</strong>
继续输入的话,文字会出现在strong标签前而不是内部,也就不是加粗的,所以要调整光标位置,执行setStartAfter(lastNode)
也就是把光标设置到lastNode也就是之后,html变成
<strong>nbsp光标</strong>
1、获取光标位置
function getCursortPosition (ctrl) {//获取光标位置函数
var CaretPos = 0 // IE Support
if (document.selection) {
ctrl.focus ()
var Sel = document.selection.createRange ()
Sel.moveStart ('character', -ctrl.value.length)
CaretPos = Sel.text.length }
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos =ctrl.selectionStart
return (CaretPos) }
2.设置光标位置
function setCaretPosition(ctrl, pos){//设置光标位置函数
if(ctrl.setSelectionRange) {
ctrl.focus()
ctrl.setSelectionRange(pos,pos)
} else if (ctrl.createTextRange){
varrange = ctrl.createTextRange()
range.collapse(true)
range.moveEnd('character', pos)
range.moveStart('character', pos)
range.select()
}
}
3、将光标移动到输入框
ctrl.focus()textarea的光标是受键盘控制的。home当前行头部,end当前行尾部,↑上一行,↓下一行。你可以。这样你就可以用JS代码模拟这4个键来控制光标的位置。如果想到下一行开头,就模拟两次按键就行。模拟按键的函数。。
function fireKeyEvent(el, evtType, keyCode){
var doc = el.ownerDocument,
win = doc.defaultView || doc.parentWindow,
evtObj
if(doc.createEvent){
if(win.KeyEvent) {
evtObj = doc.createEvent('KeyEvents')
evtObj.initKeyEvent( evtType, true, true, win, false, false, false, false, keyCode, 0 )
}
else {
evtObj = doc.createEvent('UIEvents')
Object.defineProperty(evtObj, 'keyCode', {
get : function() { return this.keyCodeVal}
})
Object.defineProperty(evtObj, 'which', {
get : function() { return this.keyCodeVal}
})
evtObj.initUIEvent( evtType, true, true, win, 1 )
evtObj.keyCodeVal = keyCode
if (evtObj.keyCode !== keyCode) {
console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配")
}
}
el.dispatchEvent(evtObj)
}
else if(doc.createEventObject){
evtObj = doc.createEventObject()
evtObj.keyCode = keyCode
el.fireEvent('on' + evtType, evtObj)
}
}
使用方法:传入你想要按的键号码。假设模拟回车,
fireKeyEvent(topWin.__activeElement, 'keydown', 13)