INPUT、TEXTAREA以及DIV中控制光标的位置

1. 设置以及获取光标位置

• 在Textarea和Input中如下获得光标函数可以兼容IE以及FireFox,对于可编辑DIV,如下代码仅仅IE下也可以正常运行.

IE分支:函数中的Sel变量是整个文档的可选区域,所以需要做一个循环,使得Sel区域中的文本中的最后一段文本和文本框中的文本做到最长匹配,其偏移量为光标的位置

function getCaretPos(element) { var CaretPos = 0; // IE Support if (document.selection) { element.focus (); var Sel = document.selection.createRange(); Sel.moveStart ('character', -element.innerText.length); var text = Sel.text; for (var i = 0; i < element.innerText.length; i++) { if (element.innerText.substring(0, i + 1) == text.substring(text.length - i - 1, text.length)) { CaretPos = i + 1; } } } // Firefox support only for textarea and input else if (element.selectionStart || element.selectionStart == '0') CaretPos = element.selectionStart; alert(CaretPos); }

• 在Textarea和Input中如下设置函数可以兼容IE以及FireFox,对于可编辑DIV,如下代码仅仅IE下也可以正常运行.

function setCaretPos(/*DomNode*/ element, /*Number*/ location){ if(element.setSelectionRange) { element.focus(); element.setSelectionRange(location,location); } else if (document.body.createTextRange) { var range = document.body.createTextRange(); range.moveToElementText(element); range.collapse(true); range.move('character', location); range.select(); } }

1. 获得光标所在位置的坐标(only IE)

var range = document.selection.createRange(); alert(range.offsetLeft);//X坐标 alert(range.offsetTop);//Y坐标

1. 选取一段文本

   在Textarea和Input中如下设置函数可以兼容IE以及FireFox,对于可编辑DIV,如下代码仅仅IE下也可以正常运行.

 

function setSelect(element,begin, end) { if (document.body.createTextRange) { var range = document.body.createTextRange(); var text = element[element.tagName=='DIV'?'innerText':'value']; var line1 = text.substring(0, begin).split('/n').length - 1; var line2 = text.substring(end, text.length).split('/n').length - 1; range.moveToElementText(element) range.moveEnd('character',parseInt(end) - element[element.tagName=='DIV'?'innerText':'value'].length + line2); range.moveStart('character',parseInt(begin) - line1); range.select(); } else if(element.setSelectionRange) { element.setSelectionRange(begin,end); } }

对于IE,如果选取一段文本后,可以调用textRange对象的execCommand方法实现对所选文本的格式操作,包括加粗,下划线,斜体等,其命令列表为

 

 

命令名称	参数
italic	N/A
bold	N/A
strikethrough	N/A
underline	N/A
insertorderedlist	N/A
insertunorderedlist	N/A
forecolor	所选字体字体颜色
backcolor	所选文本背景色

举例

range.execCommand('bold', false, null);

range.execCommand('forecolor', false, this.highlightColor);

关于IE中的TextRange可以参阅MSDN如下链接

http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx