设置输入域(input/textarea)中文本光标的位置
以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末。这种需求往往在修改现有的文本。有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法。
这个方法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
http://w3help.org/zh-cn/causes/SD9031
http://www.cnblogs.com/snandy/archive/2012/04/21/2459071.html
设置输入域(input/textarea)中文本光标的位置的更多相关文章
- TextArea中定位光标位置
原文:TextArea中定位光标位置 在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明 ...
- textarea中文本高亮选中
最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示: 最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了 ...
- 在textarea中鼠标指定的位置插入字符或表情
有些时候我们已经在textarea中输入了一些字符,然后想在鼠标指定的位置插入表情或者字符,这就需要用到jquery的一个小插件了. 代码如下: (function ($) { $.fn.extend ...
- 【转】Unity3D的输入(Input)——键盘和鼠标
http://blog.csdn.net/lingyun_blog/article/details/41451565 Unity3D使用input类控制用户的输入,输入包括了用户键盘,鼠标,触摸,重力 ...
- label 和input/textarea居中对齐
设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐
- input textarea监听鼠标粘贴
发现一个问题,在input/textarea中如果是鼠标粘贴内容进去,发现判断不了value的改变,html代码如下: <!doctype html> <html> <h ...
- 使输入框(input & textarea)变为只可读状态readonly="readonly",禁用输入框disabled="disabled"
使输入框变为只可读状态 readonly="readonly" <input class="select-city" placeholder=" ...
- js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)
一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入 ...
- js实现在光标的位置 添加内容
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- GJM : Unity3D - UI - UI边缘流光特效小技巧 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- 重新初始化 VS2010
开始->所有程序->Microsoft Visual Stdio 2005->Visual Stdio Tools->Visual Stdio 2005 命令提示 这时会弹出一 ...
- js的querySelector跟querySelectorAll
querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) document.q ...
- jScrollPane 美化滚动条
在线实例 滚动条可见 滚动条隐藏 使用方法 <div class="container"> <h1>滚动条可见</h1> <div cla ...
- Hybrid框架UI重构之路:六、前端那点事儿(Javascript)
上文回顾 :Hybird框架UI重构之路:五.前端那点事儿(HTML.CSS) 这里讲述在开发的过程中,一些JS的关键点. 换肤 对于终端的换肤,我之前一篇文章有说了我的想法. 请查看:http:// ...
- Java Web 三层架构详解
java 三层架构ssh 一个spring2.5+hibernate3.2+struts2.0组合框架,使用spring的 IoC来管理应用的 所有bean,包括struts2的 action,充分发 ...
- iOS:JSON格式字符串转字典,字典转JSON格式字符串
在iOS开发中,和服务器交互中,经常用到字典和JSON格式字符串相互转换. 代码如下: 1.JSON格式字符串转字典 + (NSDictionary *)dictionaryWithJsonStrin ...
- [Android]对BaseAdapter中ViewHolder编写简化
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3642849.html 在Android项目中,经常都会用到Li ...
- git stash提交PR的正确步骤&git squash技术
1.git stash梳理 1.1git stash的克隆与同步 首先整理下git stash的逻辑是这样 在本地做出了新的修改,提交时显示当前的版本不是最新版本,这时就需要先pull一下自己代码仓库 ...
- 转如何分析解决Android ANR
一:什么是ANR ANR:Application Not Responding,即应用无响应 二:ANR的类型 ANR定义:在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示 ...