在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。
当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的
当你点击一个输入框,或者你切换到别的输入框,selection是会跟着变化的。光标就是在selection里面,光标叫做range,是一个片段区域,和selection一样,有开始点,和结束点,当我们对文字按下左键向右拉的时候,就看到了文字变成蓝色,那个就是光标的开始和结束,当我们直接点一下的时候,光标在闪,其实只是开始和结束点重叠了。
核心方法:getSelection()返回一个Selection对象,用于表示用户选择的文本范围或插入符的当前位置
用法:selection=window.getSelection();
代码示例:html>
发送表情
varsendEmoji=document.getElementById('sendEmoji')//定义最后光标对象
varlastEditRange;//编辑框点击事件
document.getElementById('edit').onclick=function(){//获取选定对象
varselection=getSelection()//设置最后光标对象
lastEditRange=selection.getRangeAt(0)
}//编辑框按键弹起事件
document.getElementById('edit').onkeyup=function(){//获取选定对象
varselection=getSelection()//设置最后光标对象
lastEditRange=selection.getRangeAt(0)
}//表情点击事件
document.getElementById('sendEmoji').onclick=function(){//获取编辑框对象
varedit=document.getElementById('edit')//获取输入框对象
varemojiInput=document.getElementById('emojiInput')//编辑框设置焦点
edit.focus()//获取选定对象
varselection=getSelection()//判断是否有最后光标对象存在
if(lastEditRange){//存在最后光标对象,选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges()
selection.addRange(lastEditRange)
}//判断选定对象范围是编辑框还是文本节点
if(selection.anchorNode.nodeName!='#text'){//如果是编辑框范围。则创建表情文本节点进行插入
varemojiText=document.createTextNode(emojiInput.value)
if(edit.childNodes.length>0){//如果文本框的子元素大于0,则表示有其他元素,则按照位置插入表情节点
for(vari=0;i
edit.insertBefore(emojiText,edit.childNodes[i])
}
}
}else{//否则直接插入一个表情元素
edit.appendChild(emojiText)
}//创建新的光标对象
varrange=document.createRange()//光标对象的范围界定为新建的表情节点
range.selectNodeContents(emojiText)//光标位置定位在表情节点的最大长度
range.setStart(emojiText,emojiText.length)//使光标开始和光标结束重叠
range.collapse(true)//清除选定对象的所有光标对象
selection.removeAllRanges()//插入新的光标对象
selection.addRange(range)
}else{//如果是文本节点则先获取光标对象
varrange=selection.getRangeAt(0)//获取光标对象的范围界定对象,一般就是textNode对象
vartextNode=range.startContainer;//获取光标位置
varrangeStartOffset=range.startOffset;//文本节点在光标位置处插入新的表情内容
textNode.insertData(rangeStartOffset,emojiInput.value)//光标移动到到原来的位置加上新内容的长度
range.setStart(textNode,rangeStartOffset+emojiInput.value.length)//光标开始和光标结束重叠
range.collapse(true)//清除选定对象的所有光标对象
selection.removeAllRanges()//插入新的光标对象
selection.addRange(range)
}//无论如何都要记录最后光标对象
lastEditRange=selection.getRangeAt(0)
}
原文:
/a/1190000005869372#comment-area
参考:
/questions/2388164/set-focus-on-div-contenteditable-element