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修改属性值实例代码(设置属性值)
Jan 06 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
使用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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP 动态随机生成验证码类代码
2010/04/09 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
php实现微信支付之退款功能
2018/05/30 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
php经典趣味算法实例代码
2020/01/21 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
培训专员岗位职责
2014/02/26 职场文书
个人贷款担保书
2014/04/01 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
答辩状格式范本
2015/05/22 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs
Android实现图片九宫格
2022/06/28 Java/Android