Javascript 如何创建带有标签和值的自定义文本框？

我不是设计师，但我的任务是实现功能。我必须开发一个工作界面，用户可以在网格内的文本框中输入值。在输入这些值时，用户应参考网格中每个文本框的不同值。因此，我想设计一个文本框，用户在输入值时可以看到参考值。有人能给我推荐一个好的设计来解决这个问题吗

我想到的是，有一个自定义文本框，其中文本框左上角的一部分作为不可编辑的标签，而文本框的另一个区域可以编辑以输入值

如图所示，左上角是显示要引用的值的位置，而空白是一个文本框，供用户输入值

如果我提出的解决方案是一个好的解决方案，那么我如何实施它？或者任何人可以建议的其他解决方案？

有两种方法

您可以在

绝对位置使用参考标签，并将其放置在文本框上，从左侧开始使用等量的填充（参考标签的宽度）

您可以使用

：before

标记并将其直接应用于文本框。给出

：在标记位置
绝对位置
和文本框位置
相对位置
之前

---

你使用过javascript框架吗？我使用的是jquery，我可以使用所需的东西。我将在10分钟内尝试并还原类似的东西。只有您可以删除焦点上的外观，并使标签始终可见，看起来很好，但我如何还可以有一个原因框来比较两个值，并在值不相等时强制用户输入原因？我想要实现的是，您可以使用Jquery检查该值，并将其与lable的值进行比较。如果值不相等，则向父div添加一个类并使颜色为红色。您可以使用类似的方式让用户输入原因