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或css实现滚动广告的几种方案
Jan 28 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 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
Protoss兵种对照表
2020/03/14 星际争霸
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
js实现简易计算器功能
2019/10/18 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python 导入文件过程图解
2019/10/15 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
一份创业计划书范文
2014/02/08 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
主题教育活动总结
2014/05/05 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
社区敬老月活动总结
2015/05/07 职场文书
院系推荐意见
2015/06/05 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
单位收入证明范本
2015/06/18 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
《藏戏》教学反思
2016/02/23 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL