枫芸志

首页 > 网页设计 > 【Javascript】在文本框光标处插入文字并定位光标

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

2010年3月15日晴枫发表评论阅读评论

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

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

<!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 整理更新代码

枫芸志原创文章，转载请注明来源并保留原文链接

本文链接:http://witmax.cn/insert-text-at-textbox-cursor.html

分类: 网页设计标签: Javascript 2,627次阅读

评论 (1) Trackbacks (0) 发表评论 Trackback

Firm

2010年2月5日16:51 | #1

回复 | 引用

呵呵，不错，收藏之，对于俺这个菜鸟还是很有用滴

[回复]

本文目前尚无任何 trackbacks 和 pingbacks.

【Javascript】文本框textarea高度随内容自适应增长收缩 ping不通网关，网关mac全0的原因

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

推荐内容

分类目录

近期评论

近期文章

页面

文章存档

友情链接

功能

站点信息