Javascript实现获取及设置光标位置的方法


Posted in Javascript onJuly 21, 2015

本文实例讲述了Javascript实现获取及设置光标位置的方法。分享给大家供大家参考。具体如下:

在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE、Firefox、Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数。

1. 获取光标位置函数:

function getCursortPosition (ctrl) {
  var CaretPos = 0;  // IE Support
  if (document.selection) {
  ctrl.focus ();
    var Sel = document.selection.createRange ();
    Sel.moveStart ('character', -ctrl.value.length);
    CaretPos = Sel.text.length;
  }
  // Firefox support
  else if (ctrl.selectionStart || ctrl.selectionStart == '0')
    CaretPos = ctrl.selectionStart;
  return (CaretPos);
}

2. 设置光标位置函数:

function setCaretPosition(ctrl, pos){
  if(ctrl.setSelectionRange)
  {
    ctrl.focus();
    ctrl.setSelectionRange(pos,pos);
  }
  else if (ctrl.createTextRange) {
    var range = ctrl.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript代码加载优化方法
Jan 30 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 Javascript
详解参数传递四种形式
Jul 21 #Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 #Javascript
jQuery实现html元素拖拽
Jul 21 #Javascript
异步安全加载javascript文件的方法
Jul 21 #Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 #Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 #Javascript
SWFObject基本用法实例分析
Jul 20 #Javascript
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
php使用crypt()函数进行加密
2017/06/08 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
一句话JavaScript表单验证代码
2009/08/02 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
jQuery实现本地存储
2020/12/22 jQuery
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
解决python运行效率不高的问题
2020/07/20 Python
Python实现一个优先级队列的方法
2020/07/31 Python
用python写PDF转换器的实现
2020/10/29 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
幼儿园教师辞职信
2014/01/18 职场文书
小学开学寄语
2014/01/19 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
汽车广告策划方案
2014/05/31 职场文书
离婚案件答辩状
2015/05/22 职场文书
js实现上传图片到服务器
2021/04/11 Javascript