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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
Javascript 按位与运算符 (&)使用介绍
Feb 04 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php流量统计功能的实现代码
2012/09/29 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
js post提交调用方法
2014/02/12 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
深入理解Promise.all
2018/08/08 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
使用Python写CUDA程序的方法
2017/03/27 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
浅谈Python 函数式编程
2020/06/20 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
比利时家具购买网站:Home24
2019/01/03 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
校园广播稿500字
2014/02/04 职场文书
淘宝活动总结范文
2014/06/26 职场文书
学校师德师风整改措施
2014/10/27 职场文书
三方股东合作协议书
2014/10/28 职场文书
汶川大地震感悟
2015/08/10 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB