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常见表单应用技巧
Jan 09 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
探索node之事件循环的实现
Oct 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 array_intersect()函数使用代码
2009/01/14 PHP
php调用c接口无错版介绍
2014/03/11 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
PHP 实现缩略图
2021/03/09 PHP
jQuery参数列表集合
2011/04/06 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue二级路由设置方法
2018/02/09 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
python热力图实现简单方法
2021/01/29 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
大学自主招生自荐信
2013/12/16 职场文书
行政专员工作职责
2013/12/22 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
文化宣传方案
2014/03/13 职场文书
教师自查自纠材料
2014/10/14 职场文书
财政局长个人总结
2015/03/04 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
如何写观后感
2015/06/19 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书