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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
layui的select联动实现代码
Sep 28 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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统计目录大小的自定义函数分享
2014/11/18 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
JavaScript 参考教程
2006/12/29 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
python私有属性和方法实例分析
2015/01/15 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python 文件数据读写的具体实现
2020/01/24 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
党员学习十八大感想
2014/01/17 职场文书
司机检讨书
2014/02/13 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
社团活动总结范文
2014/04/26 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
教师年度个人总结
2015/02/11 职场文书
交通事故起诉书
2015/05/19 职场文书
小学大队长竞选稿
2015/11/20 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
五年级作文之想象作文
2019/10/30 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技