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 相关文章推荐
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jquery操作select方法汇总
Feb 05 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
使用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中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
浅谈js原生拖放
2016/11/21 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python的pip安装以及使用教程
2018/09/18 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python爬虫与反爬虫大战
2020/07/30 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
2019销售早会主持词
2019/06/27 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书