js設定游標插入文字和HTML

2022-04-03 11:46:46 字數 1358 閱讀 9289

在乙個textarea的某個游標位置插入文字或者在某個編輯器中插入html內容,我最近經常和這些打交道,但總是一團模糊,今天整理一下關於如何插入文字,設定游標,移動游標等操作。

**一:在textarea某個位置插入文字

function insertatcursor(myfield, myvalue) 

//mozilla and others

else if (myfield.selectionstart || myfield.selectionstart == '0') else

}

演示

****二:設定游標位置

function setselectionrange(input, selectionstart, selectionend)  else if (input.createtextrange) 

}function setcarettopos(input, pos)

演示

**jquery版本

$.fn.selectrange = function (start, end) 

return this.each(function () else if (this.setselectionrange) else if (this.createtextrange)

});};//使用

$('#hw').selectrange(8);

演示

****三:獲取游標位置

function getcursorpos(input) ;

}else if (input.createtextrange)

rng.setendpoint("starttostart", input.createtextrange());

for (var pos = ; rng.compareendpoints("endtostart", rng) > 0; rng.moveend("character", -1))

return pos;}}

return -1;

}

演示

****四:在可編輯div或者iframe處插入html

//code from 

function pastehtmlatcaret(html)

range.insertnode(frag);

// preserve the selection

if (lastnode)

}} else if (document.selection && document.selection.type != "control")

}

演示

**今天先寫這些,後面再詳細說說這些相容性問題。

js獲取游標,設定游標位置

直接貼 作為日常開發筆記 設定游標位置 params ele 輸入框元素 params pos 需要將游標設定的位置 author 2018 09 29 setcaretposition ele,pos else if ele.createtextrange 獲取游標在輸入框中相對位置 param ...

動態插入HTML或文字

動態插入html或文字 實現web頁面內容動態改變的dhtml操作 ie的dhtml物件提供了四個可讀寫的屬性來動態操作頁面元素的內容 innertext,outertext,innerhtml,outerhtml.需注意兩點 1.其中innertext,outertext屬性的值是作為普通文字呈現...

動態插入HTML或文字

實現web頁面內容動態改變的dhtml操作 ie的dhtml物件提供了四個可讀寫的屬性來動態操作頁面元素的內容 innertext,outertext,innerhtml,outerhtml.需注意兩點 1.其中innertext,outertext屬性的值是作為普通文字呈現的,即使它含有html標...