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 相关文章推荐
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
微信小程序 标签传入数据
May 08 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
js使用formData实现批量上传
Mar 27 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
JS实现图片切换特效
Dec 23 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
Javascript 入门基础学习
2010/03/10 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Python多线程thread及模块使用实例
2020/04/28 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
党的生日活动方案
2014/08/15 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS