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 相关文章推荐
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php自动获取关键字的方法
2015/01/06 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
python 模拟登陆163邮箱
2020/12/15 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
美容院考勤制度
2014/01/30 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
责任书范本
2014/08/25 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书