基于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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
详解php中的implements 使用
2017/06/13 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
JavaScript运算符小结
2015/06/03 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python字典多条件排序方法实例
2014/06/30 Python
python抽象基类用法实例分析
2015/06/04 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python日志syslog使用原理详解
2020/02/18 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
历史学专业个人的自我评价
2013/10/13 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
代收款委托书范本
2014/10/01 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
怎样写辞职信
2015/02/27 职场文书