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 相关文章推荐
原生js的弹出层且其内的窗口居中
May 14 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
Node学习记录之cluster模块
May 31 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
详解vue-router导航守卫
Jan 19 Javascript
vue.js+element 默认提示中英文操作
Nov 11 Javascript
利用javaScript处理常用事件详解
Apr 14 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
php获取根域名方法汇总
2014/10/28 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
用python代码做configure文件
2014/07/20 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Python异常处理例题整理
2019/07/07 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
python如何修改文件时间属性
2021/02/05 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
法学专业应届生求职信
2013/10/16 职场文书
实习教师自我鉴定
2013/12/12 职场文书
大学生校园创业计划书
2014/02/08 职场文书
多媒体教室标语
2014/06/26 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
周一给客户的问候语
2015/11/10 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
Vue2.0搭建脚手架
2022/03/13 Vue.js