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 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
原生js+ajax分页组件
Jan 30 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
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP实现倒计时功能
2020/11/16 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
解决vue attr取不到属性值的问题
2018/09/18 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python continue继续循环用法总结
2018/06/10 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
numpy.array 操作使用简单总结
2019/11/08 Python
用python计算文件的MD5值
2020/12/23 Python
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
传播学毕业生求职信
2013/10/11 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
党员个人公开承诺书
2014/08/29 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
单位推荐信范文
2015/03/27 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers