【Javascript】在文本框光标处插入文字并定位光标

在文本框光标处插入文字，并不常用，但碰到了却也比较棘手，浏览器兼容的问题总让人头痛。

经查阅资料并经修改完善得到以下可用代码，运行一下看看效果更直观：

<!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>枫芸志 » 在文本框的指定位置插入文本并定位光标</title> <script type="text/javascript"> function InsertString(tbid, str){ var tb = document.getElementById(tbid); tb.focus(); if (document.all){ var r = document.selection.createRange(); document.selection.empty(); r.text = str; r.collapse(); r.select(); } else{ var newstart = tb.selectionStart+str.length; tb.value=tb.value.substr(0,tb.selectionStart)+str+tb.value.substring(tb.selectionEnd); tb.selectionStart = newstart; tb.selectionEnd = newstart; } } function GetSelection(tbid){ var sel = ''; if (document.all){ var r = document.selection.createRange(); document.selection.empty(); sel = r.text; } else{ var tb = document.getElementById(tbid); // tb.focus(); var start = tb.selectionStart; var end = tb.selectionEnd; sel = tb.value.substring(start, end); } return sel; } function ShowSelection(tbid){ var sel = GetSelection(tbid); if (sel) alert('选中的文本是：'+sel); else alert('未选择文本！'); } </script> </head> <body> <form><textarea id="txtContent" cols="50" rows="5">先在本文框中点击鼠标或选择文本以确定光标位置和选取内容。 ——晴枫 http://witmax.cn</textarea><br /><br /> <input type = "button" value = "插入字符串 {Good}" onclick="InsertString('txtContent', '{Good}');"/> <input type = "button" value = "插入字符串 {Bad}" onclick="InsertString('txtContent', '{Bad}');"/> <input type = "button" value = "获取选中的文本" onclick="ShowSelection('txtContent');"/><br /> <div id="tip"></div> </form> </body> </html>

提示：你可以先修改部分代码再运行。

代码中，针对IE浏览器，运用document.selection.createRange()来解决；针对非IE浏览器，运用selectionStart和selectionEnd来操作。已能够获取文本框中选择的文本并控制文本框的光标，实际的应用那就随意发挥了。

以上代码已经过IE各版本、Firefox、Opera、Chrome、Safari测试。

参考资料：详探TextRange对象--查找与选择

2010-3-15 整理更新代码

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【Javascript】在文本框光标处插入文字并定位光标》

标签： Javascript

枫芸志

枫芸志

【Javascript】在文本框光标处插入文字并定位光标

已经有4 条评论抢在你前面了~

点击这里取消回复。