以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末。这种需求往往在修改现有的文本。有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法。

这个方法setCursorPosition需要使用两个原生API

原生JS实现

/*
* 设置输入域(input/textarea)光标的位置
* @param {HTMLInputElement/HTMLTextAreaElement} elem
* @param {Number} index
*/
function setCursorPosition(elem, index) {
var val = elem.value
var len = val.length // 超过文本长度直接返回
if (len < index) return
setTimeout(function() {
elem.focus()
if (elem.setSelectionRange) { // 标准浏览器
elem.setSelectionRange(index, index)
} else { // IE9-
var range = elem.createTextRange()
range.moveStart("character", -len)
range.moveEnd("character", -len)
range.moveStart("character", index)
range.moveEnd("character", 0)
range.select()
}
}, 10)
}

  

jQuery插件

$.fn.setCursorPosition = function(option) {
var settings = $.extend({
index: 0
}, option)
return this.each(function() {
var elem = this
var val = elem.value
var len = val.length
var index = settings.index // 非input和textarea直接返回
var $elem = $(elem)
if (!$elem.is('input,textarea')) return
// 超过文本长度直接返回
if (len < index) return setTimeout(function() {
elem.focus()
if (elem.setSelectionRange) { // 标准浏览器
elem.setSelectionRange(index, index)
} else { // IE9-
var range = elem.createTextRange()
range.moveStart("character", -len)
range.moveEnd("character", -len)
range.moveStart("character", index)
range.moveEnd("character", 0)
range.select()
}
}, 10)
})
}

线上示例:http://snandy.github.io/lib/func/setCursorPosition.html

相关:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement.setSelectionRange

createRange method

http://w3help.org/zh-cn/causes/SD9031

http://www.cnblogs.com/snandy/archive/2012/04/21/2459071.html

最新文章

  1. 用jQuery修改background图片平铺方式
  2. 【PHP自定义显示系统级别的致命错误和用户级别的错误】
  3. JAVA代码实现下载单个文件,和下载打包文件
  4. kali2.0 系统自带截图功能
  5. [swustoj 1092] 二分查找的最大次数
  6. apache服务器参数设置
  7. poj 1949 Chores 最长路
  8. MyGui 3.2.0(OpenGL平台)的编译
  9. ASP.NET Web API编程——模型验证与绑定
  10. (NO.00001)iOS游戏SpeedBoy Lite成形记(二十六)
  11. SQL ----post漏洞测试注入
  12. Photoshop调出清晰的阴雨天气山水风景照
  13. [TJOI2007] 调整队形
  14. 【Checkio Exercise】Three Point Circle
  15. C# 注册机功能开发,机器码设计
  16. Luogu P1447 [NOI2010]能量采集
  17. HTTP梳理
  18. MySQL-事务隔离级别设置
  19. Redis-Map
  20. [BZOJ5010][FJOI2017]矩阵填数(状压DP)

热门文章

  1. Spring中的事务
  2. MAC下反編譯安卓APK
  3. CI框架源码阅读笔记6 扩展钩子 Hook.php
  4. Java经典实例:正则表达式,找到匹配的文本
  5. Java实现注册时发送激活邮件+激活
  6. C#操作Excel的函数
  7. jQ函数after、append、appendTo的区别
  8. 微信网页授权(OAuth2.0) PHP 源码简单实现
  9. CORS(跨域资源共享)
  10. 记Ubuntu开机黑屏及解决过程