首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用selectionStart时,onFocus无法获取光标位置

是因为onFocus事件在光标位置改变之前触发,因此无法获取到最新的光标位置。解决这个问题可以使用setTimeout延迟一段时间来获取光标位置,或者使用其他事件来替代onFocus事件。

selectionStart是一个用于获取文本框或文本区域中选中文本的起始位置的属性。它返回一个整数,表示选中文本的起始位置的索引。如果没有选中文本,则返回当前光标的位置。

在前端开发中,selectionStart常用于实现自定义文本框的功能,比如限制输入字符的长度、实时统计输入字符的个数等。

以下是使用selectionStart的示例代码:

代码语言:txt
复制
<input type="text" id="myInput" onkeyup="getCursorPosition()">

<script>
function getCursorPosition() {
  var input = document.getElementById("myInput");
  var startPos = input.selectionStart;
  var endPos = input.selectionEnd;
  console.log("Start position: " + startPos);
  console.log("End position: " + endPos);
}
</script>

在上面的代码中,当用户在文本框中输入时,每次keyup事件触发时都会调用getCursorPosition函数来获取光标位置。函数内部通过input.selectionStart和input.selectionEnd来获取光标的起始位置和结束位置,并将其打印到控制台上。

推荐的腾讯云相关产品:无

希望以上信息能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

textarea的中文输入判断与搜狗输入法的特殊行为

在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。...上图是我在oninput事件中打的日志,可以明显的看到每次oninput触发之后,selectionStart和selectionEnd的值都相同而且表示最后一个文本,视觉上是我们看到的光标所在的位置,...如果我们挪动光标,这两个值也会变化。...这里我们提取两个关键特征,在及时输入的情况下: selectionStart和selectionEnd随光标位置变化而变化 selectionStart和selectionEnd值相等 下面我们再看非直接输入模式...这种情况,结束输入触发一次input,我倒是认为很合理的做法,这样很多情况我们不用关心是否是中文输入了,input的时候获取新的value,记录上一次的selectionstart就可以了。

2.6K110
  • 以计算器为例介绍input操作焦点功能,兼容IE版本

    问题1 选中input 部分内容, 可以使用 selectionStart、 document.selection、 createRange、 createTextRange 等 API 来实现,具体不在此处展开说明...问题2 需要解决一下几个小问题: 1) 点击计算器其他按钮,获取input 框当前 焦点停留的位置。...(图为点击按钮的代码) 以下内容基于jQuery-1.7实现 解决问题: 1) 知识点 selectionStart, IE8及以下不支持该属性,使用document.selection 替代方案解决...具体代码如图: 输入:HTMLInputElement 输出:鼠标停留在 input 框中的位置。 2)js的substring方法。 获取到 input 光标位置后,在中间插入新值即可。...输入:光标位置 输出:当前元素 另外:在IE下点击按钮获取光标位置,浏览器默认为以当前最近元素为事件源。input会丢失光标,方法返回的永远是0。

    1.9K10

    C#实现简易XML阅读器(含源文件和exe文件)

    ToCharArray()将string转化成char数组,在实际使用中,常常会连续使用多次查找功能,如果每次查找都要转换以下,会增大系统开销,因此需要设定布尔变量来表示字符串内容是否被修改,仅当用户手动修改了...“上一处”和“下一处”则要根据鼠标光标位置寻找上一个或下一个出现的位置 private void button2_Click(object sender, EventArgs e)//向下查找 {..., "查找结果", MessageBoxButtons.OK, MessageBoxIcon.None); } 查找之前使用Getword()来获取最新的char数组,此时还要考虑一种情况,假设用户需要查找...”abc”,并且用户当前已经选中”abc”,就需要将起始位置设置为光标位置的后3格。...替换是利用字符串截取功能实现的,因此在替换前需要先保存光标位置,替换后再重设光标位置

    79720

    微博的文本编辑和显示(emoji表情,@某人、链接高亮点击)

    因为考虑到字数限制还有大小问题,下面还有对应参数,大小一般我设置的是20dp(够大了吧= =),插♀入的时候注意当前的光标位置哟,而Android的文本输入框一般对于ImageSpan 的回退都是整个删除的...();// 获取光标位置 if (selectionStart > 0) { String body = editTextEmoji.getText...i = tempStr.lastIndexOf("[");// 获取最后一个表情的位置 if (i !...EditText在点击的时候我们可以获取光标落下的位置,这时候我们通过该位置去已有@的list列表里判断每个名字所在位置,比对光标位置是不是落在了@块内,如果是就强行将光标落到@块的旁边(= =光标不能插进来...Html.fromHtml来达到文本变色的效果,将@名字插入到spannableStringBuilder光标位置中,再在后面补上一个\b。

    2.2K20

    【Java 进阶篇】JQuery 案例:qq表情选择,表达情感的小黄脸

    // 表情选择框点击事件 $("#emojiContainer img").click(function() { // 获取点击的表情关键词...textInput = $("#textInput"); var currentText = $textInput.val(); // 在光标位置插入表情关键词...+ currentText.substring(cursorPos); $textInput.val(newText); // 更新光标位置...为了更好地控制光标位置,我们使用selectionStart和selectionEnd属性。 实际应用场景 qq表情选择框不仅仅可以用在聊天应用中,还可以应用在各种需要用户输入的场景。...小贴士 在使用qq表情选择框,有一些小贴士可能对你有帮助: 1. 图片资源的优化 确保你使用的qq表情图片是经过优化的,以保证页面加载的性能。

    19440

    Android实现类似QQ对话框的@他人的整体解决方案

    监听输入内容改变后的字符变化,强调的是在为什么在onTextChanged中实现字符监听是考虑到对直接对字符(char)的操作比转成字符串的操作上有性能优势和便捷性优势,而且onTextChanged里直接提供了改变的字符的位置...return; } } } }); 用变量selectionStart 记录下光标选择的位置...,遍历所有的ATSpan的位置区间(start,end),如果selectionStart在这个区间就直接返回,光标落在整个@用户的最后。...>= start && selectionStart <= end) { posterContentEt.getText().delete(start...包括后面从服务器获取的富文本数据还原成Span对象也还是从Android源码中Html类中的写法活得启发完成的。如果有相关问题可以加我的微信问我。第一次上(写)床(博客),难免紧张。

    52950

    Android端IM应用中的@人功能实现:仿微博、QQ、微信,零入侵、高可扩展

    这个需求又产生了两个问题: 1)当普通文本发生变化后,如何监控一个Span起始位置发生变化? 2)如何禁止Span内部插入光标? 对于第一个问题,我在网上看到过一种思路。...4、微博的做法 4.1 侦听并处理光标活动、选中状态以及Span位置变化 对于光标活动和选中状态侦听,如果采用继承EditText的方式实现标签文本功能,重写onSelectionChanged(int...也就是说,我们可以通过SpanWatcher侦听光标活动,通过Selection实现当光标移动到Span内部,让它重新移动到Span最近的边缘位置,Span内部永远无法插入光标。...4.2 侦听软键盘删除键并处理选中状态 现在已经把Span覆盖的文本作为一个整体,且无法插入光标,但是当我们从Span尾部删除文本,仍是逐字删除。...如果有一个View,即使它并未attach到Window上,我们也可以手动调用measure()、layout()、draw()方法获取一个View的截图Drawable用来添加到ImageSpan中使用

    2.2K30

    Nginx在使用火山引擎或者其他 CDN无法获取客户端真实ip解决方法

    在前久发现,uptime经常监控到网站504,在防火墙查看日志才知道,它把我CDN全拦截了,但是我明明设置了获取真实IP,还是把我CDN拦截了,中途我换了CDN,发现同样配置有些CDN是真实IP,有些没有...比如火山引擎,华为云等等就不会获取真实IP。...通过查看火山引擎文档: 这里给出了部分请求头以及通过nginx获取客户端源IP的方法,但我查看后还是通过修改日志格式的方法获取ip,那这样相当于没解决。...然后我想了下,既然都是通过获取请求头的方式获取IP,那么是否是因为这些CDN的请求头的问题,我换一下获取规则就行了呢?然后开始找文档,发现只有上面哪个提到了请求头。...于是我修改了一下网上获取请求头的规则,完美解决了防火墙无法获取真实IP。 将下面代码添加进nginx的http字段里即可:   此处内容已隐藏,请评论后刷新页面查看.

    2.1K10

    让你的EditText删除表情比微信更高效--记一次android性能分析优化实战

    spData.start, spData.end); return true; } } return false; } SpData中保存了表情对应的文本的开始位置和结束位置...,直接使用Editable.delete()删除 问题定位 粗略定位 先打Log粗略定位下问题,把自己觉得可能会造成卡顿的地方都加了log,发现卡顿的罪魁祸首就是editable.delete(spData.start...中并不包含ChangeWatcher所以不会多次调用ChangeWatcher.onSpanChanged() 删除表情后再将SpannableStringBuilder设置给EditText 最后设置光标位置...出现上面log的原因是因为InputConnection在setText()需要被重新创建,而第二次删除InputConnection可能还没创建好或者IInputConnectionWrapper...看完代码才发现解决方案如此简单 之前定位到问题在于ChangeWatcher,但它是一个内部类,自己想的法子都是在外部怎么避免ChangeWatcher.onSpanChanged()被调用,谷歌直接简单粗暴的用反射获取

    1.4K30

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    当 DOM 元素 获得焦点 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; 如 : 当 用户 点击输入框 或 通过键盘切换到输入框..., 该事件会被触发 ; 绑定 onfocus 事件的方法 : 设置 onfocus 属性 : 可以 通过 DOM 操作 , 给元素添加 onfocus 属性 , 来指定当焦点集中在元素上要执行的JavaScript...代码 ; // 行内设置 : 使用 onfocus 属性 // JavaScript 脚本中设置 var text...使用 标签选择器 获取元素 var text = document.querySelector('input'); // 2....注册 获得焦点 事件 onfocus text.onfocus = function() { // 如果 input 表单获取焦点 , 则显示 " 请输入搜索内容

    10410

    JavaScript学习(二)

    二维数组的定义方法二: var Myarr = [[0,1,2],[1,2,3]]; 2、赋值 Myarr[0][1] = 5; //0表示行,1表示列 流程控制语句 判断语句 if语句是基于条件城里才执行相应代码使用的语句...函数定义好后是不能自动执行的,需要调用它,直接在需要的位置写函数名。...光标聚集 onblur 光标离开 onload 网页导入 onunload 关闭网页 鼠标单击事件(onclick) onclick是鼠标单击事件,当在网页上单击鼠标,就会发生该事件,同时onclick...光标聚焦事件(onfocus) 当网页中的对象获得焦点,执行onfocus调用的程序。如当光标移动到文本框内,即焦点在文本库内,触发onfocus事件。...失焦事件(onblur) onblur事件和onfocus事件是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

    1.5K10

    Android自定义支付密码输入框,光标问题总结!

    mScrollX + right, verticalPadding + bottom);         }     } invalidateRegion方法中调用了invaldate方法,用于在指定位置绘制光标...虽然EditText自带的光标已经不能满足我们的需求,但我们可以参考其光标闪烁的源码,然后修改一下来满足我们的需求,重点是修改光标绘制的显示位置 在控件可见开启光标闪烁,控件不可见时取消光标闪烁 override...,重点是计算光标显示位置 private fun drawCursor(canvas: Canvas) {         if (!...editableText.length)                 val count = canvas.save()                 val line = layout.getLineForOffset(selectionStart...,修改光标显示位置相关代码,即可实现光标闪烁效果 GitHub 本文相关代码可在GitHub上获取,地址如下: https://github.com/kongpf8848/ViewWorld Android

    1.4K20

    移动端Webapp中的那些Bug

    1.2 解决方案 手动设置滑到边界的scrollTop(scrollFix) 当快滑到上边界或者下边界的值,手动设置scrollTop与达到边界相差一像素(上边界:scrollTop = 1,...在其中的描述是:他的内容中有一输入框,然后focus,当滑动内容光标不跟随移动,而在此输入的时候,光标又会回到输入框中。情况应该和我类似。...就是必须设置延迟300ms以上,不然,光标重绘不正常,而且光标有明显的移动过程。所以如果童鞋们如果发现有什么更好的办法,还望不吝赐教。 ?...那么可以具体分这几步来解决: 没有focus的时候采用fixed固定头部 不要让用户进行缩放 当输入框focus,采用绝对定位头部,同时使用window.pageYOffset来计算滑动的距离,设置头部的...在键盘消失的时候回归到原来的位置就好。

    3K50
    领券