JavaScript 获取/设置光标位置,兼容Input&&TextArea

更新时间：2011年01月01日 18:12:42 作者：

JavaScript 获取/设置光标位置,兼容Input&&TextArea：项目中遇到的问题，特此记录。

<!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> <title>JavaScript 获取/设置光标位置,兼容Input&&TextArea。</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px; text-indent: 2px; } </style> <script> //获取光标位置 //单行文本框 function getPositionForInput(ctrl){ var CaretPos = 0; if (document.selection) { // IE Support ctrl.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support CaretPos = ctrl.selectionStart; } return (CaretPos); } //多行文本框 function getPositionForTextArea(ctrl) { var CaretPos = 0; if(document.selection) {// IE Support ctrl.focus(); var Sel = document.selection.createRange(); var Sel2 = Sel.duplicate(); Sel2.moveToElementText(ctrl); var CaretPos = -1; while(Sel2.inRange(Sel)){ Sel2.moveStart('character'); CaretPos++; } }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support CaretPos = ctrl.selectionStart; } return (CaretPos); } //设置光标位置函数 function setCursorPosition(ctrl, pos){ if(ctrl.setSelectionRange){ ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } //test function process( id,targetId ){ var no = document.getElementById(id).value; setCursorPosition(document.getElementById(targetId),no); } </script> </head> <body> <div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea：</div> <div class="title">单行文本框</div> <p><input class="input" id="textbox" name="textbox" value="Hi,www.jb51.net!!!" /></p> <input type="button" onclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position"> 输入位置: <input type="text" id="no1" size="1" /><input type="button" onclick="process('no1','textbox');" value="Set Position"> <div class="title">多行文本框</div> <textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;width:246px;overflow:hidden">Hi,CssRain!!!</textarea> <input type="button" onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position"> 输入位置: <input type="text" id="no2" size="1" /><input type="button" onclick="process('no2','zhangdanNum');" value="Set Position"> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

光标位置

BootStrap TreeView使用实例详解
这篇文章主要为大家详细介绍了BootStrap TreeView使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
js表单验证实例讲解
这篇文章主要为大家详细介绍了js表单验证，JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证，感兴趣的小伙伴们可以参考一下
2016-03-03
深入理解JavaScript强制类型转换
JavaScript中的强制类型转换包括显式和隐式转换,涉及字符串、数字和布尔值三种基本类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-09-09
js自定义select下拉框美化特效
这篇文章主要为大家介绍了javascript自定义select下拉框美化特效的相关资料,需要的朋友可以参考下
2016-05-05
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
这篇文章主要介绍了bootstrap fileinput组件整合Springmvc上传图片到本地磁盘的方法,需要的朋友可以参考下
2017-05-05
JavaScript多态与封装实例分析
这篇文章主要介绍了JavaScript多态与封装,结合实例形式分析了JavaScript多态与封装的概念、功能、优缺点以及相关问题与注意事项,需要的朋友可以参考下
2018-07-07
js下用gb2312编码解码实现方法
在js中将中文用gb2312编码。如，“我”编码后应该是“%CE%D2”。
2009-12-12
JavaScript计算两个日期时间段内日期的方法
这篇文章主要介绍了JavaScript计算两个日期时间段内日期的方法,涉及javascript操作时间的技巧,需要的朋友可以参考下
2015-03-03
JS使用cookie实现只出现一次的广告代码效果
我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况，其实是运用了Cookie 存储 web 页面的用户信息，Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中
2017-04-04
js数字输入框(包括最大值最小值限制和四舍五入)
以前需要做一个数字输入的InputBox,结果无奈需求太BT，搞得焦头烂额，重做了无数次。无奈之下，再次Google，发现早有成熟的插件了(闷在家里造轮子果然不好啊)，autoNumeric使用方便，功能强大，现在介绍给大家，一个非常好的jquery plugin。
2009-11-11

JavaScript 获取/设置光标位置,兼容Input&&TextArea

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具