基于jQuery实现的设置文本区域的光标位置


Posted in jQuery onJune 15, 2018

如何使用jQuery在文本框中设置光标位置?我有一个带有内容的文本字段,并且我希望光标在焦点位于特定的偏移位置,该如何实现呢?

实现方法一:

这是一个jQuery解决方案:

$.fn.selectRange = function(start, end) {
 if(end === undefined) {
 end = start;
 }
 return this.each(function() {
 if('selectionStart' in this) {
  this.selectionStart = start;
  this.selectionEnd = end;
 } else if(this.setSelectionRange) {
  this.setSelectionRange(start, end);
 } else if(this.createTextRange) {
  var range = this.createTextRange();
  range.collapse(true);
  range.moveEnd('character', end);
  range.moveStart('character', start);
  range.select();
 }
 });
};

有了这个,你可以做

$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

实现方法二:

$.fn.setCursorPosition = function(position){
 if(this.length == 0) return this;
 return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
 if(this.length == 0) return this;
 input = this[0];

 if (input.createTextRange) {
 var range = input.createTextRange();
 range.collapse(true);
 range.moveEnd('character', selectionEnd);
 range.moveStart('character', selectionStart);
 range.select();
 } else if (input.setSelectionRange) {
 input.focus();
 input.setSelectionRange(selectionStart, selectionEnd);
 }

 return this;
}

$.fn.focusEnd = function(){
 this.setCursorPosition(this.val().length);
  return this;
}

现在,您可以通过调用以下任何元素将焦点移至任何元素的结尾

$(element).focusEnd();

方法三

function setSelectionRange(input, selectionStart, selectionEnd) {
 if (input.setSelectionRange) {
 input.focus();
 input.setSelectionRange(selectionStart, selectionEnd);
 }
 else if (input.createTextRange) {
 var range = input.createTextRange();
 range.collapse(true);
 range.moveEnd('character', selectionEnd);
 range.moveStart('character', selectionStart);
 range.select();
 }
}

function setCaretToPos (input, pos) {
 setSelectionRange(input, pos, pos);
}

调用办法:

setCaretToPos(document.getElementById("YOURINPUT"), 4);

jquery中文本域光标操作(选中、添加、删除、获取)

1、获取光标位置:$(elem).iGetFieldPos();
2、设置光标位置:$(elem).iSelectField(start);
3、选中指定位置内的字符:$(elem).iSelectField(start,end);
4、选中指定的字符:$(elem).iSelectStr(str);
5、在光标之后插入字符串:$(elem).iAdd(str);
6、删除光标前面(-n)或者后面(n)的n个字符:$(elem).iDel(n);

这篇文章就介绍到这了,希望大家以后多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 #jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
You might like
模仿OSO的论坛(五)
2006/10/09 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
AngularJS语法详解
2015/01/23 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
python针对excel的操作技巧
2018/03/13 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python中有关时间日期格式转换问题
2019/12/25 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
如何设置Java的运行环境
2013/04/05 面试题
大学生自我鉴定
2013/12/08 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
出国导师推荐信
2015/03/25 职场文书
小学校长开学致辞
2015/07/29 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis