我正在尝试在 React 中构建一个输入组件，用户可以在其中输入他/她的电子邮件。但是，只应接受带有@ampf.com 的电子邮件。
我需要在用户在输入框中输入@符号后立即以灰色显示文本@ampf.com。
然而，用户输入的内容应始终保持黑色。只有“@ampf.com”的预测应显示为灰色。
因此，如果用户键入“his_email@a”，则只有“mpf.com”应保持灰色。
同样，如果用户输入“his_email@am”，那么只有“pf.com”应该保持灰色。
如果用户输入“his_email@something_other_than_ampf.com”，那么所有预测的灰色文本都应该被删除。
我只需要使用 javascript 和 css 来实现它。
任何帮助将不胜感激。
预期行为的一些示例:
AnilYadav@ampf.com
AnilYadav@ampf.com
AnilYadav@ampf.com
AnilYadav@ampf.com
AnilYadav@ab''
不知何故，这些示例没有显示电子邮件的黑色部分和灰色部分之间的区别。
最佳答案
最简单的方法就是为用户名输入一个字段，然后只显示一个与@ampf.com 内联的文本标签
然后在提交时，只需将用户名和静态域字符串组合起来组成完整的电子邮件地址即可。
<input placeholder=“username” />@ampf.com关于javascript - 如何为自动显示@domain.com 的电子邮件输入制作输入组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57733337/