在输入字段中的几个单词下方显示红色波浪线
Show red wavy line below few words in input field
我正在使用 React 中的 input 字段创建一个组件，用于输入类似于 (A=2 and B="Value2") 的 queries 语法。我需要突出显示 errors by showing red wavy line below objects which are not correct 而不是整个查询.
到目前为止我使用了以下方法:-
使用 div with transparent color text ，对齐 below the input field ，映射 errors in the div 并显示波浪线。它一直工作到固定宽度，但 as my input value going beyond the width of input field and is becoming scrollable, it is not working 在这种情况下，因为 div 不会随输入值一起滚动。
使用 contentEditableDiv 修改 innerHTML ，但它有点破坏组件所需的其他内容。
第一种方法很方便，但前提是 I find any way to scroll the div in synchronization with the input value。经过很多努力，我已经搜索过了，但找不到合适的答案。
是否有人可以帮助或建议其他更好的方法来实现这一目标？
提前致谢！
我会尝试使用透明颜色文本制作 div，但将您应该在 class wavy 范围内加下划线的单词包裹起来，然后应用此 css：
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
如果您使透明 div 与输入重叠，使其与绝对位置或类似的东西重叠，使其与输入的宽度相同，并使其像 overflow: auto 一样可滚动，它可能会起作用。
编辑：如果没有绝对需要使用输入或文本区域，您可以使用 div 和 contentEditable="true" 并将其样式设置为看起来相似。这是 stackblitz 示例 https://stackblitz.com/edit/js-jaz62k?file=index.html
我正在使用 React 中的 input 字段创建一个组件，用于输入类似于 (A=2 and B="Value2") 的 queries 语法。我需要突出显示 errors by showing red wavy line below objects which are not correct 而不是整个查询.
到目前为止我使用了以下方法:-
使用
div with transparent color text，对齐below the input field，映射errors in the div并显示波浪线。它一直工作到固定宽度，但as my input value going beyond the width of input field and is becoming scrollable, it is not working在这种情况下，因为 div 不会随输入值一起滚动。使用
contentEditableDiv修改 innerHTML ，但它有点破坏组件所需的其他内容。
第一种方法很方便，但前提是 I find any way to scroll the div in synchronization with the input value。经过很多努力，我已经搜索过了，但找不到合适的答案。
是否有人可以帮助或建议其他更好的方法来实现这一目标？
提前致谢！
我会尝试使用透明颜色文本制作 div，但将您应该在 class wavy 范围内加下划线的单词包裹起来，然后应用此 css：
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
如果您使透明 div 与输入重叠，使其与绝对位置或类似的东西重叠，使其与输入的宽度相同，并使其像 overflow: auto 一样可滚动，它可能会起作用。
编辑：如果没有绝对需要使用输入或文本区域，您可以使用 div 和 contentEditable="true" 并将其样式设置为看起来相似。这是 stackblitz 示例 https://stackblitz.com/edit/js-jaz62k?file=index.html