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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
javascript学习之闭包分析
Dec 02 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
js生成word中图片处理方法
Jan 06 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 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下载文件的详解
2013/06/02 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
帝国cms目录结构分享
2015/07/06 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
PHP7 弃用功能
2021/03/09 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
2017/09/28 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python新手如何理解循环加载模块
2020/05/29 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
Ibatis的核心配置文件都有什么
2014/09/08 面试题
大学生简单自荐信
2013/11/10 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
销售目标责任书
2014/07/23 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
旷课检讨书范文
2014/10/30 职场文书
技术入股合作协议书
2016/03/21 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL