javascript设置文本框光标的方法实例小结


Posted in Javascript onNovember 04, 2016

本文实例总结了javascript设置文本框光标的方法。分享给大家供大家参考,具体如下:

对于text

//得到光标位置
function getCaret(textbox) {
  var control = document.activeElement;
  textbox.focus();
  var rang = document.selection.createRange();
  rang.setEndPoint("StartToStart",textbox.createTextRange())
  control.focus();
  return rang.text.length;
}

对于textarea

function getCaret(ZysrID) 
{
 var txb = document.getElementById(ZysrID);//根据ID获得对象
 var pos = 0;//设置初始位置
 txb.focus();//输入框获得焦点,这句也不能少,不然后面会出错,血的教训啦.
 var s = txb.scrollTop;//获得滚动条的位置
 var r = document.selection.createRange();//创建文档选择对象
 var t = txb.createTextRange();//创建输入框文本对象
 t.collapse(true);//将光标移到头
 t.select();//显示光标,这个不能少,不然的话,光标没有移到头.当时我不知道,搞了十几分钟
 var j = document.selection.createRange();//为新的光标位置创建文档选择对象
 r.setEndPoint("StartToStart",j);//在以前的文档选择对象和新的对象之间创建对象,妈的,不好解释,我表达能力不算太好.有兴趣自己去看msdn的资料
 var str = r.text;//获得对象的文本
 var re = new RegExp("[//n]","g");//过滤掉换行符,不然你的文字会有问题,会比你的文字实际长度要长一些.搞死我了.我说我得到的数字怎么总比我的实际长度要长.
 str = str.replace(re,"");//过滤
 pos = str.length;//获得长度.也就是光标的位置
 r.collapse(false);
 r.select();//把光标恢复到以前的位置
 txb.scrollTop = s;//把滚动条恢复到以前的位置
}

设置光标函数

function setCaret(id,pos)
{
var textbox = document.all(id);

var r = textbox.createTextRange(); 

r.collapse(true); 

r.moveStart('character',pos); 

r.select();
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js如何实现设计模式中的模板方法
Jul 23 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
jQuery实现视频展示效果
May 30 jQuery
使用Vue实现一个树组件的示例
Nov 06 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 #Javascript
JS创建对象的写法示例
Nov 04 #Javascript
微信公众号支付H5调用支付解析
Nov 04 #Javascript
AngularJS用户选择器指令实例分析
Nov 04 #Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 #Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 #Javascript
AngularJS中watch监听用法分析
Nov 04 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php流量统计功能的实现代码
2012/09/29 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
文本链接逐个出现的js脚本
2007/12/12 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
会计主管岗位职责范文
2013/11/08 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
教师师德承诺书
2014/03/26 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
入党积极分子评语
2014/05/04 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
感谢信范文大全
2015/01/23 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书