繁体   English   中英

我怎么知道在输入框中更改了文本的哪一部分?

How do I know which part of text is changed in an input box?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个输入框,希望我可以检测到用户修改的详细信息。

如:

  • 用户在框为空的情况下键入“ A”:

    deletedTextCount = 0, deletePosition = -1, insertPosition = 0, insertedText = 'A'

  • 当“ ABCD”在框中时,用户将插入号放在“ C”之后并按退格键:

    deletedTextCount = 1, deletePosition = 2, insertPosition = -1, insertedText = ''

  • 当“ ABCD”位于框中时,用户选择“ BC”并粘贴“ FOO”:

    deletedTextCount = 2, deletePosition = 1, insertPosition = 1, insertedText = 'FOO'

输入事件是否可以提供这些属性,或者我必须以某种方式计算这些属性?

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { value: after } = target.currentTarget; console.log(`before: ${before}, after: ${after}`); let insertedText = ''; let insertPosition = -1; let deletedTextCount = 0; let deletePosition = -1; before = after; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" /> 

2 个回复

编辑好的,所以当从输入的中间开始工作时这是行不通的,但是我建议使用像jsdiff这样的字符串区分库来获得非常详细的更改列表。


此功能将找出更改,添加或删除的内容。

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { value: after } = target.currentTarget; // Length of change, negative if removed const lengthChange = after.length - before.length; let changed; // If added some, get the new stuff if (lengthChange > 0) { changed = after.slice(after.length - lengthChange); // Other wise get the old stuff } else { changed = "-" + before.slice(before.length + lengthChange); } console.log(`before: ${before}, change: ${changed}, after: ${after}`); before = after; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" /> 

经过一番挣扎,我认为我已经解决了...

 $('#input').on('input', onChange); let before = ''; function onChange(target){ const { selectionStart: start, value: after } = target.currentTarget; // calculate the different starting points from both direction let p1 = 0, p2 = 0; // calclate the end point first for(; p2 < after.length - start; p2++){ if(before[before.length - 1 - p2] === undefined || before[before.length - 1 - p2] !== after[after.length - 1 - p2]){ break; } } // calclate start point for(; p1 < after.length - p2 - (after.length > before.length ? 1 : 0); p1++){ if(before[p1] !== after[p1] || p1 + p2 >= before.length){ break; } } let insertedText = ''; let insertPosition = -1; let deletedTextCount = 0; let deletePosition = -1; // has delete if(p1 + p2 < before.length){ deletedTextCount = before.length - (p1 + p2); deletePosition = p1; } // has add if(p1 + p2 < after.length){ insertedText = after.substr(p1, after.length - (p1 + p2)); insertPosition = p1; } console.log(`deletePosition: ${deletePosition}, deletedTextCount: ${deletedTextCount}, insertPosition: ${insertPosition}, insertedText: "${insertedText}"`); before = after; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input" type="text" /> 

2 我如何知道表单输入已更改?

我有一个由&lt;% Ajax.BeginForm() {} %&gt;生成的表单,其中包含大量输入和texareas。 当输入值改变时,我需要知道它并将输入和表单标记为“脏”。 如果用户试图不保存而离开页面,我会要求他或她确认放弃更改。 有关如何做到这一点的任何建议? ...

5 我怎么知道文本输入属于哪几类?

目前,我必须手动浏览分类书并写下类别。希望我可以创建一个系统,该系统可以自动查找我的输入属于哪些类别并输出类别的名称。 有人可以教我如何或给我一些想法吗? 因此,如果我输入此“更改计划”,则由于“关键字更改”在其下方,因此输出将为“ Psychomotor Domain”中的“ Ad ...

8 如何将图像从一个报告链接到另一个报告中的特定文本框或文本框的一部分?

我有一个质量检查报告,其中包含15-20个小部件(基本上是带有条形图的汇总值),它们全部显示不同的数据。 我需要将每个小部件链接到特定的文档(描述,其背后的逻辑以及建议的QA问题修复程序)。 如何将图像(在这种情况下为小信息“ i”图标)链接到专用于该文档的另一个报告中的特定文本框,或将图像 ...

10 验证输入,我只知道它在 laravel 中的一部分名称

我有一个带有动态输入的表单,例如:min_1,$min_2,...$min_1000,$max_1000,我想验证这些元素是数字元素并且是必需的。 由于我不确定要验证的输入名称,我该如何编写角色。 我需要一些类似 $min_(what ever): required|numeric 我感谢任何帮助。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM