Javascript在光標處插入文本

原創

2020-06-11 08:11

在文本框光標處插入文字，並不常用，但碰到了卻也比較棘手，瀏覽器兼容的問題總讓人頭痛。

經查閱資料並經修改完善得到以下可用代碼，運行一下看看效果更直觀：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JAVASCRIPT在文本框的指定位置插入文本並定位光標</title> <mce:script type="text/javascript"></mce:script> </head> <body> <form><textarea id="txtContent" cols="50" rows="5">先在本文框中點擊鼠標或選擇文本以確定光標位置和選取內容。 ——晴楓 http://witmax.cn</textarea><br /><br /> <input type = "button" value = "插入字符串 {Good}" οnclick="InsertString('txtContent', '{Good}');"/> <input type = "button" value = "插入字符串 {Bad}" οnclick="InsertString('txtContent', '{Bad}');"/> <input type = "button" value = "獲取選中的文本" οnclick="ShowSelection('txtContent');"/><br /> <div id="tip"></div> </form> </body> </html>

代碼中，針對IE瀏覽器，運用document.selection.createRange()來解決；針對非IE瀏覽器，運用selectionStart和selectionEnd來操作。已能夠獲取文本框中選擇的文本並控制文本框的光標，實際的應用那就隨意發揮了。

以上代碼已經過IE各版本、Firefox、Opera、Chrome、Safari測試。

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

Javascript在光標處插入文本

物理機開關機

前端使用 Konva 實現可視化設計器（15）- 自定義連接點、連接優化

網頁播放器 Windows Media Player 網頁播放器參數含義

統計在線人數和歷史人數,寫入數據庫!

分頁存儲過程！

gridview技巧之：gridview獲取當前行索引的方法

解決安裝IE8後，VS2005無法調試的問題

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結