基于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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
浅谈struts1 & jquery form 文件异步上传
May 25 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 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
CodeIgniter框架URL路由总结
2014/09/03 PHP
js代码实现微博导航栏
2015/07/30 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python正规则表达式学习指南
2016/08/02 Python
Python排序算法实例代码
2017/08/10 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python绘制热力图heatmap
2020/03/23 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
实习心得体会
2014/01/02 职场文书
财务务虚会发言材料
2014/10/20 职场文书
通知的写法
2015/04/23 职场文书
运动会观后感
2015/06/09 职场文书
课改心得体会范文
2016/01/25 职场文书
感谢信的技巧及范例
2019/05/15 职场文书