获取光标处左边和右边的数据～

最新推荐文章于 2025-04-01 18:58:39 发布
最新推荐文章于 2025-04-01 18:58:39 发布
阅读量1.5k 收藏
点赞数
分类专栏： 技术 文章标签： input button function
<INPUT value=123456789 name=test>
<INPUT onclick=demo() type=button value=get>
<SCRIPT>
function demo(){
 test.focus();
 var r = document.selection.createRange();
 var t = test.createTextRange();
 
  r.setEndPoint("StartToStart",t);
 var len = r.text.length;
 alert(test.value.substr(0, len));
 alert(test.value.substr(len));
}
</SCRIPT>
HQChart实战教程60-如何定制十字光标输出内容
小银
04-11 862
定制HQChart十字光标输出内容
C# ScottPlot 5.0 WinForms 十字光标示例：轻松实现动态数值显示，你学会了吗？
java专栏
01-03 1597
ScottPlot是一个免费、开源的.NET交互式绘图库，能够轻松地实现大型数据集的交互式显示。它支持多种图表类型，如折线图、柱状图、饼图、散点图等。ScottPlot的性能非常出色，即使是处理千万级别的数据也游刃有余。
文本光标-----获取内容、格式
laner__gg的博客
03-07 1178
1、文本光标----获取格式内容： ①获取当前光标所在的文本段： ②当前光标所在的文本块格式： ③当前光标所在的文本块字符格式： def 内容和格式的获取(self): tc = self.te.textCursor() # 输出文本光标所在的段落 print(tc.block()) # 输出光标所在段落的文本 print(tc.block().text()) # 获取段落编号(段落编号从0
C++ 获取输入光标处的字符串。
feng582528935的专栏
11-29 2296
在我的程序中，想获取到拥有输入焦点的控件句柄，并且得到输入光标前的一个字符? 句柄我已经获取到了（通过AttachThreadInput函数），现在就是光标前的字符获取不到，请问大家有谁知道的吗？
JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容
热门推荐
itdragons的博客
08-11 5万+
Demo：点击下载Dmo 参考文献： 最近在segmentfault上看到它的日期输入控件，感觉挺有意思。好吧，动手写一个，加到自己的代码库里吧。       然后问题来了，在上面图片中，我们很明显的看得出这里涉及光标位置的控制。比如说当我输入1993的3之后，光标必须要得插入到-中划线的下个输入点。       在网上找了找获取和设置光标位置的方法
JavaScript获取文本框光标距离body左边和上边的像素位置
haogemr的博客
07-30 2009
转载：JavaScript获取文本框光标的像素位置 html 代码 <!DOCTYPE html> <html> <head> <title>InputPostion</title> </head> <body> <textarea id="text" onkeyup="show(this)"...
上下左右键控制table中光标(兼容多浏览器)
01-25
在网页开发中，有时我们需要为用户提供更友好的交互体验，比如在表格中使用键盘操作来移动光标。本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达...
算法之Java数据结构：背包、队列和栈的拓展与应用
最新发布
wj_rdk的博客
04-01 1135
在编程学习的旅程中，每一次对新知识的探索都是成长的宝贵机会。今天，咱们一起深入研究Java中背包、队列和栈相关的拓展知识，从不同类型的队列、栈的实现到它们在各种场景中的应用，希望能和大家共同进步，提升编程技能！
Unity UI制作与鼠标光标
jijikok的博客
02-07 1290
Unity ui
jquery中，input获得焦点时光标自动定位到文字后面
weixin_30340617的博客
02-06 2883
效果： 转载于:https://www.cnblogs.com/dingjiujiu/p/8422658.html
Javascript设置和获取Textarea的光标位置的方法
relucent的专栏
07-20 1194
&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;tit
Android Studio插件开发之 - IOC注解生成器
z240336124的专栏
02-07 1246
1.概述　　上一期我们已经分享了Android Studio插件开发之 - 基础入门篇。那么现在我们来动手写一个IOC注解生成器,有点类似于ButterKnife的插件一样自动给我们生成代码，在网上找了很多资料国内基本就在HelloWorld阶段，也有很多哥们向我反应插件的代码还是有点蒙B。代码方面能理解就理解，不理解也不强求，如果你能改一改别人已经写好的插件就最好了，实在不行我们干脆也别折腾了大不
C语言 读取鼠标光标位置
小白
05-18 7319
#include&lt;stdio.h&gt; #include&lt;windows.h&gt;    //必要头文件 int main() { POINT q={0,0};    //不知道是个啥的东西 LPPOINT s=&amp;q;    //大概是赋初值？         GetCursorPos(s);    //获取当前位置 printf("x=%d,y=%d\n",s-&...
我在开发form 表单的时候遇到了一个问题，input 输入框中输入了文字，并且输入框中已经对输入的长度做了限制了，限制只能输入30bytes 正常测试都没有问题，当输入的内容达到上限以后不能再输入文字了的时候，我把光标移动到最左边继续输入两个文字或者数字但是发现了一个现象就是一个字在最左边一个字再最右边，这是怎么回事儿呢？
03-21
<think>嗯，用户提到在开发表单时，input输入框限制了30字节，正常情况下没问题。但当输入到上限后，用户把光标移到最左边继续输入两个字符，结果出现了一个字在最左边，另一个在右边的现象。我需要先理解这个问题的原因。 首先，input的maxlength属性是基于字符数还是字节数？用户明确说是30bytes的限制，但通常前端maxlength是按字符数计算的，尤其是处理UTF-8时。比如，一个中文字符占3字节，如果maxlength设为10字符，那么实际字节可能超过30。但用户的问题在于输入达到上限后，移动光标到左边再输入，导致字符位置异常。 可能的原因：当输入框已满，用户将光标移到开头，输入新字符时，由于maxlength限制，新字符会替换掉原有字符。但如果是插入到中间，可能会覆盖后面的字符？或者因为字节计算方式不同，导致替换的位置不对？ 另一个可能性是，当用户输入时，浏览器处理maxlength的方式是按字符而非字节，所以当用户输入多字节字符（如中文）时，实际字节可能超过限制，但前端只按字符数限制，导致在移动光标后插入字符时，部分字节被截断，导致字符显示异常。 例如，假设每个中文字符占3字节，maxlength为10字符，即30字节。当输入10个中文后，已达30字节。此时用户将光标移到开头，输入两个英文字符（各1字节），这时总字节变成10*3 + 2 =32，超过限制。但浏览器可能只允许输入到30字节，于是可能自动截断后面的字符，导致显示异常，如最后一个中文字符被截断成不完整字节，显示乱码，或者插入的位置导致字符拆分。 或者，输入时，插入两个字符，但maxlength触发，导致只保留前30字节，可能将后面的字符截断，导致字符位置错乱。比如，原字符串是“ABCDEF...”（30字节），在开头插入“XY”，则新字符串是“XYABCDEF...”，但超过长度，所以截断后面的两个字符，变成“XYABCDEF...”（30字节），可能原本最后的两个字符被移除，但中间插入导致字符被拆分，特别是多字节字符被截断，显示为乱码，看起来像左边有新字符，右边有残留。 另外，前端的maxlength是按字符数计算的，而后端可能按字节校验，导致前端允许输入但后端拒绝，但这里的问题是在前端显示异常，所以可能还是前端处理的问题。 总结可能原因：前端使用maxlength属性，按字符数限制，而实际字节限制需要更精确处理。当用户插入字符到已满的输入框时，由于替换或截断方式的问题，导致多字节字符被拆分，显示异常。 解决方案可能需要用JS实时计算字节数，并在输入时根据字节进行截断，而不是依赖maxlength属性。例如，监听输入事件，计算当前值的字节数，超过则截断，并更新输入框的值。这样无论用户如何移动光标，都能确保总字节不超过限制，避免字符拆分。</think>这个问题通常与**输入限制的检测方式**和**多字节字符的编码特性**有关。以下是逐步解释和解决方案： --- ### 一、现象分析 1. **表面现象**：当输入框已满（30字节）时，将光标移到最左侧继续输入，新字符会出现在最左端，同时右侧的字符被“挤掉”或出现位置错乱。 2. **根本原因**： - **`maxlength`属性按字符数限制，而非字节数**：HTML的`maxlength`属性默认统计字符数量（如字母、汉字、数字均算1个字符），而你的需求是限制30字节（如1个汉字占3字节，1个字母占1字节）。 - **多字节字符的截断问题**：当输入内容超过字节限制时，若直接插入新字符，可能导致多字节字符（如汉字）被截断成不完整字节，从而显示异常。 --- ### 二、问题复现逻辑 1. 假设输入框已输入10个汉字（每个3字节，共30字节），此时达到字节限制。 2. 将光标移到最左侧，尝试输入1个字母（1字节）： - **期望行为**：无法输入（总字节已满）。 - **实际行为**：字母被插入到左侧，右侧最后一个汉字被“挤掉”部分字节，导致： - 左侧显示新输入的字母， - 右侧显示被截断的乱码（原汉字的残留字节）。 --- ### 三、解决方案 #### 方法1：使用JavaScript动态计算字节数 通过监听输入事件，实时计算字节数并截断超长内容： ```javascript // 获取输入框元素 const input = document.getElementById('your-input-id'); input.addEventListener('input', function (e) { const maxBytes = 30; let value = e.target.value; // 计算当前值的字节数 let byteCount = new TextEncoder().encode(value).length; // 若超过限制，逐字符截断直到符合要求 while (byteCount > maxBytes) { value = value.slice(0, -1); byteCount = new TextEncoder().encode(value).length; } e.target.value = value; }); ``` #### 方法2：后端双重校验（推荐） 前端仅做初步限制，后端再按字节严格校验，避免绕过前端的非法输入。 --- ### 四、关键注意事项 1. **字符与字节的区别**： - 字母、数字：1字符 = 1字节。 - 汉字：1字符 = 3字节（UTF-8编码）。 2. **输入光标的位置问题**： - 当用户将光标移到中间或左侧时，新字符的插入可能导致多字节字符被“切割”，需通过字节计算逻辑规避。 --- ### 五、总结 问题的核心是**字符数与字节数的混淆**。直接使用`maxlength`无法满足字节级限制需求，需通过JavaScript动态计算字节并截断。同时，务必在后端补充校验逻辑，确保数据安全性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值