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 相关文章推荐
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
javascript动画算法实例分析
Jul 31 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
javaScript中"=="和"==="的区别详解
Mar 16 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
详解参数传递四种形式
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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
python进程管理工具supervisor使用实例
2014/09/17 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Python pip使用超时问题解决方案
2020/08/03 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
门卫人员岗位职责
2013/12/24 职场文书
洗车工岗位职责
2014/03/15 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
《三国志》赏析
2019/08/27 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL