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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
JS实现简易计算器
Feb 14 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 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+javascript模拟Matrix画面
2006/10/09 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python实现kmp算法的实例代码
2019/04/03 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python GUI模拟实现计算器
2020/06/22 Python
Python logging模块原理解析及应用
2020/08/13 Python
武汉瑞得软件笔试题
2015/10/27 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
垃圾回收的优点和原理
2014/05/16 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
赔偿协议书范本
2014/09/12 职场文书
债务追讨律师函
2015/06/24 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
vue 自定义组件添加原生事件
2022/04/21 Vue.js