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 window.document的属性、方法和事件小结
Oct 24 Javascript
防止文件缓存的js代码
Jan 10 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
vue实现计步器功能
Nov 01 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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php 类自动载入的方法
2015/06/03 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
python自动发送邮件脚本
2018/06/20 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
关于VPN
2012/06/10 面试题
自荐信如何“自荐”
2013/10/24 职场文书
大学自主招生推荐信
2014/05/10 职场文书
学校献爱心活动总结
2014/07/08 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
银行授权委托书样本
2014/10/13 职场文书
周年庆典答谢词
2015/01/20 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
python调试工具Birdseye的使用教程
2021/05/25 Python
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS