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 基于原型的对象(创建、调用)
Oct 16 Javascript
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
基本DOM节点操作
Jan 17 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
详解ES6中class的实现原理
Oct 03 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 过滤器实现代码
2010/08/09 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
laravel入门知识点整理
2020/09/15 PHP
多广告投放代码 推荐
2006/11/13 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JS实现购物车特效
2017/02/02 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang