炫意html5
最早CSS3和HTML5移动技术网站之一

javascript获取iframe中光标所在位置的父节点名称

项目背景:

最近在做一个客服聊天系统后台,聊天窗口中,有字体加粗,倾斜,下划线等等。这个效果可以在我的上一篇文章中简单的实现,具体请看javascript execCommand,复文本框神器,案例请看

但是需求方有额外的要求,要求iframe中字体加粗的话,鼠标点在上面,我们按钮有选中状态。对于这个按钮的选中状态怎么办呢?

思路和方法:

一开始我想找到javascript execCommand的一个返回状态,但是最终以失败告终。

在和同事的研究交流过程中,找到了如下方法,封装了一个函数,从而获得iframe中选中的文本,及光标所在位置的父级元素的节点名称。

代码如下:

 var isIE = navigator.userAgent.indexOf("MSIE")>0;
var Q_EDITFORM_DOCUMENT = null;
var Q_SELECTION = null;
var Q_RANGE = null;
var Q_RANGE_TEXT = "";
function getParentNode()
{
if(isIE)
{
return document.selection.createRange().parentElement();
}
else
{
var startRangeNode = Q_RANGE.startContainer;
if (startRangeNode.nodeType == 3)
{
var textNode = startRangeNode;
startRangeNode = textNode.parentNode;
}
else
{
if (startRangeNode.tagName.toLowerCase() ==
'html')
{
startRangeNode =
startRangeNode.childNodes[0].nextSibling;
}
}
return startRangeNode;
}
}
//插入div的相关处理函数
function QEditformDocument()
{
if (isIE)
{
Q_EDITFORM_DOCUMENT = document;
}
else
{
Q_EDITFORM_DOCUMENT = document;
}
}
function QSelection()
{
if (isIE)
{
Q_SELECTION = Q_EDITFORM_DOCUMENT.selection;
Q_RANGE = Q_SELECTION.createRange();
Q_RANGE_TEXT = Q_RANGE.text;
//alert(Q_RANGE_TEXT);
}
else
{
Q_SELECTION = Q_EDITFORM_DOCUMENT.getSelection();
Q_RANGE = Q_SELECTION.getRangeAt(0);
Q_RANGE_TEXT = Q_RANGE.toString();
//console.dir(Q_RANGE_TEXT);
}
}

使用方法:

        //HtmlEditor为编辑器iframe的id
//调用getParentNode()前必须初始化文档对象
QEditformDocument();
QSelection();
var parentobj = getParentNode();
console.dir(parentobj);
//parentobj是一个object,获取它的名称,用parentobj.tagName就可以获取到元素的名称,注意,名称是大写的!!

demo案例预览

输出可以用谷歌浏览器查看console ,alert看不清楚。

小结

通过这个方法,我们可以很简单的制作出加粗,倾斜,和下划线等的选中效果了。这个效果我已经在项目中实现了,具体demo没有写!大家可以看我开头的这个案例请看 案例,结合案例预览这个案例,当选择某个文字或者标签的时候,给相应加粗,倾斜和下划线等一个不一样的样式,就可以做到了!

炫意HTML5 » javascript获取iframe中光标所在位置的父节点名称

Java基础教程Android基础教程