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

这个方法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

设置输入域(input/textarea)中文本光标的位置的更多相关文章

  1. TextArea中定位光标位置

    原文:TextArea中定位光标位置 在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明 ...

  2. textarea中文本高亮选中

    最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示: 最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了 ...

  3. 在textarea中鼠标指定的位置插入字符或表情

    有些时候我们已经在textarea中输入了一些字符,然后想在鼠标指定的位置插入表情或者字符,这就需要用到jquery的一个小插件了. 代码如下: (function ($) { $.fn.extend ...

  4. 【转】Unity3D的输入(Input)——键盘和鼠标

    http://blog.csdn.net/lingyun_blog/article/details/41451565 Unity3D使用input类控制用户的输入,输入包括了用户键盘,鼠标,触摸,重力 ...

  5. label 和input/textarea居中对齐

    设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐

  6. input textarea监听鼠标粘贴

    发现一个问题,在input/textarea中如果是鼠标粘贴内容进去,发现判断不了value的改变,html代码如下: <!doctype html> <html> <h ...

  7. 使输入框(input  & textarea)变为只可读状态readonly="readonly",禁用输入框disabled="disabled"

    使输入框变为只可读状态 readonly="readonly" <input class="select-city" placeholder=" ...

  8. js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)

    一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入 ...

  9. js实现在光标的位置 添加内容

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. GJM : Unity3D - UI - UI边缘流光特效小技巧 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  2. 重新初始化 VS2010

    开始->所有程序->Microsoft Visual Stdio 2005->Visual Stdio Tools->Visual Stdio 2005 命令提示 这时会弹出一 ...

  3. js的querySelector跟querySelectorAll

    querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) document.q ...

  4. jScrollPane 美化滚动条

    在线实例 滚动条可见 滚动条隐藏 使用方法 <div class="container"> <h1>滚动条可见</h1> <div cla ...

  5. Hybrid框架UI重构之路:六、前端那点事儿(Javascript)

    上文回顾 :Hybird框架UI重构之路:五.前端那点事儿(HTML.CSS) 这里讲述在开发的过程中,一些JS的关键点. 换肤 对于终端的换肤,我之前一篇文章有说了我的想法. 请查看:http:// ...

  6. Java Web 三层架构详解

    java 三层架构ssh 一个spring2.5+hibernate3.2+struts2.0组合框架,使用spring的 IoC来管理应用的 所有bean,包括struts2的 action,充分发 ...

  7. iOS:JSON格式字符串转字典,字典转JSON格式字符串

    在iOS开发中,和服务器交互中,经常用到字典和JSON格式字符串相互转换. 代码如下: 1.JSON格式字符串转字典 + (NSDictionary *)dictionaryWithJsonStrin ...

  8. [Android]对BaseAdapter中ViewHolder编写简化

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3642849.html 在Android项目中,经常都会用到Li ...

  9. git stash提交PR的正确步骤&git squash技术

    1.git stash梳理 1.1git stash的克隆与同步 首先整理下git stash的逻辑是这样 在本地做出了新的修改,提交时显示当前的版本不是最新版本,这时就需要先pull一下自己代码仓库 ...

  10. 转如何分析解决Android ANR

    一:什么是ANR ANR:Application Not Responding,即应用无响应 二:ANR的类型 ANR定义:在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示 ...