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的实现回车键Enter切换焦点
Sep 14 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
JS常见算法详解
Feb 28 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
Vue3 响应式侦听与计算的实现
Nov 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的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP分享图片的生成方法
2018/04/25 PHP
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
简明 Python 基础学习教程
2007/02/08 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python 经典数字滤波实例
2019/12/16 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Java的for语句中break, continue和return的区别
2013/12/19 面试题
经典c++面试题五
2014/12/17 面试题
文明青少年标兵事迹材料
2014/01/28 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
设计大赛策划方案
2014/06/13 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
音乐之声观后感
2015/06/04 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python