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 解析xml文件
Aug 09 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
详解TypeScript中的类型保护
Apr 29 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
关于Django外键赋值问题详解
2017/08/13 Python
Python实现购物车程序
2018/04/16 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python实现共轭梯度法
2019/07/03 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
python集合的新增元素方法整理
2020/12/07 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
公司股份合作协议书
2014/12/07 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
react中的DOM操作实现
2021/06/30 Javascript
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL