INPUT、TEXTAREA以及DIV中控制游標的位置

設定以及擷取游標位置

• 在Textarea和Input中如下獲得游標函數可以相容IE以及FireFox,對於可編輯DIV,如下代碼僅僅IE下也可以正常運行.

IE分支:函數中的Sel變數是整個文檔的可選地區,所以需要做一個迴圈,使得Sel地區中的文本中的最後一段文本和文字框中的文本做到最長相符,其位移量為游標的位置

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

• 在Textarea和Input中如下設定函數可以相容IE以及FireFox,對於可編輯DIV,如下代碼僅僅IE下也可以正常運行.

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

獲得游標所在位置的座標(only IE)

var range = document.selection.createRange();<br />alert(range.offsetLeft);//X座標<br />alert(range.offsetTop);//Y座標

選取一段文本

在Textarea和Input中如下設定函數可以相容IE以及FireFox,對於可編輯DIV,如下代碼僅僅IE下也可以正常運行.

 

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

對於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