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判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
jquery实现倒计时功能
Dec 28 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
JavaScript修改注册表实例代码
Jan 05 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&mysql(五)
2006/10/09 PHP
php阳历转农历优化版
2016/08/08 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
js获取Get值的方法
2016/09/29 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue打包相关细节整理(小结)
2018/09/28 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python制作Windows系统服务
2017/03/25 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
学习Python列表的基础知识汇总
2020/03/10 Python
python实现udp传输图片功能
2020/03/20 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
PHP数据运算类型都有哪些
2013/11/05 面试题
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
施工安全汇报材料
2014/08/17 职场文书
汇报材料怎么写
2014/12/30 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
Python实现简单的猜单词
2021/06/15 Python
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
SQL SERVER中的流程控制语句
2022/05/25 SQL Server