jq 获取input的光标，定位光标的位置

最近遇到一个需求，用户在输入框里输入文本的时候，每输入一个字符都要转换成大写，

看起来比较简单，但是输入完后在中间插入字符删除字符的时候，

每添加或者删除一个字符的时候input框的光标自动跑到字符最后面，很是头疼

下面在网上找的各种资料，整理的一些方法，经过一些尝试终于解决了，记录下来，此方法依赖于jquery。

注释掉的部分可以自行删除。以下是demo：

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="text" id="demo"><script>$("#demo").on("keyup", function(e) {if(e.keyCode==37||e.keyCode==39){return;}var $this = $(this);var val = $this.val();console.log($(this).getCursorPosition())//当你在input中已有的值中间插入删除字符的时候，键盘按键松起 存储当前光标的位置var i = $(this).getCursorPosition()//输入的字母转化成大写，此时input被重新赋值，所以光标会自动定位到值的最后一位$this.val(val.toUpperCase());//把光标位置恢复到最后一次输入的字符的位置setCaretPosition($(this)[0],i)})
</script>
<script language="JavaScript">//获取光标位置(function ($, undefined) {$.fn.getCursorPosition = function () {var el = $(this).get(0);var pos = 0;if ('selectionStart' in el) {pos = el.selectionStart;} else if ('selection' in document) {el.focus();var Sel = document.selection.createRange();var SelLength = document.selection.createRange().text.length;Sel.moveStart('character', -el.value.length);pos = Sel.text.length - SelLength;}return pos;}})(jQuery);/*定位光标*/function setCaretPosition(ctrl, pos){if(ctrl.setSelectionRange){ctrl.focus();ctrl.setSelectionRange(pos,pos);}else if (ctrl.createTextRange) {var range = ctrl.createTextRange();range.collapse(true);range.moveEnd('character', pos);range.moveStart('character', pos);range.select();}}</script></body>
</html>

jq 获取input的光标，定位光标的位置相关推荐

jq获取input值的各种方法
1 if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 name即控件name属性,va ...
jq获取input选取的文件名_tushare获取交易数据并可视化分析
获取数据是金融量化分析的第一步,找不到可靠.准确的数据,量化分析就无从谈起.随着信息技术的不断发展,数据获取渠道也越来越多,尤其是Python网络爬虫,近几年愈来愈火.然而,很多人毕竟精力有限,没时间 ...
jq获取input的name
$("#id").attr("name"); $(".class").prop("name"); // 也可以使用pro ...
input长度随输入内容动态变化 input光标定位在最右侧
<input type="text" οnkeydοwn="this.onkeyup();" οnkeyup="this.size=(this. ...
VUE 移动端处理input光标定位在最后的问题（简单版）
在Vue中使用JS调整input光标位置,让他保持在最后在调试移动端的时候,由于触摸事件,光标有时候会错位,所以导致有需求需要控制js光标的位置,要么在前要么在后,在查了相关的资料后,发现其实很简 ...
vue 获取input光标位置,并实现插入模板语法。
点击上面的模板说明,可以在输入框的光标位置插入相应的语法. <el-form-item label="模板说明:" v-if="form.news_type===' ...
文本编辑器实现光标定位的功能
文章目录 1 文本编辑器实现光标定位的功能 1 文本编辑器实现光标定位的功能问题:如何计算编辑框中光标的位置? 思路: 文本框对象的内部包含了QTextCursor对象. 通过position()成 ...
JavaScript Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...
C语言中的光标定位函数
C语言中的光标定位函数(将光标移动到屏幕的指定位置) 所谓的光标定位函数,就是实现键盘输入坐标值从而把鼠标的光标移动到相应坐标位置的函数模块,在简单的小游戏如贪吃蛇等需要定位输出的程序中有着较为广泛的 ...

jq 获取input的光标，定位光标的位置

jq 获取input的光标，定位光标的位置相关推荐

最新文章

热门文章