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版仿Path菜单效果
Dec 15 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
openLayer4实现动态改变标注图标
Aug 17 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
2010/11/16 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
社会实践心得体会
2014/01/03 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
个人简历自荐信
2014/06/26 职场文书
检讨书范文500字
2015/01/28 职场文书
四年级作文之植物
2019/09/20 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
OpenCV实现普通阈值
2021/11/17 Java/Android