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处理xml格式的返回数据(实例解析)
Nov 28 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 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
PHP数据流应用的一个简单实例
2012/09/14 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
深入理解PHP内核(一)
2015/11/10 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
我的NodeJs学习小结(一)
2014/07/06 NodeJs
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python中format()函数的简单使用教程
2018/03/14 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
通过实例解析Python return运行原理
2020/03/04 Python
python logging模块的使用详解
2020/10/23 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
小学老师寄语大全
2014/04/04 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
授权收款委托书范本
2014/10/10 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL