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判断录入的日期是否合法
Jan 08 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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验证复选框有效性的示例
2013/11/13 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php创建类并调用的实例方法
2019/09/25 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python输出数学符号实例
2020/05/11 Python
基于python检查矩阵计算结果
2020/05/21 Python
同事吵架检讨书
2014/02/05 职场文书
应届生自荐信范文
2014/02/21 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
务工证明怎么写
2015/06/18 职场文书
早恋主题班会
2015/08/14 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
用python实现监控视频人数统计
2021/05/21 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技