合并文本框中的输入以自动填充另一个文本框

Question

我编写Javascript的经验非常少，所以如果我说得不好，我会请求你的原谅。 ：）

首先，上下文。

我在saas平台上工作，允许我在表单中添加自定义CSS和Javascript。

每个表单都需要一个唯一的电子邮件地址。

但是，我们并不总是需要一个电子邮件地址 - 特别是当我们填写人们亲自或通过电话提供的信息时。

所以我一直试图找到一种方法，通过根据提供的输入自动创建“假电子邮件”，为其中一个表单添加变通方法。

这使我们可以快速使用表单而无需手动提供电子邮件，但是当我们稍后搜索系统以清理这些虚假地址时，仍然可以使电子邮件有意义且独特。

好的，现在我需要一些精彩的指导。

我想在两个文本框中组合输入以自动填充第三个。

但另外 - 我想为此信息添加后缀。

因此，例如，如果他们输入John“和”Doe“，新文本框将添加后缀”-noemail@email.com“以创建”JohnDoe-noemail@email.com“。

我想你明白了。 :)

查看此图片：

我感谢任何人都可以提供的任何见解。

提前致谢！

Answer 1

我想这应该可以胜任。在此示例中，每次输入任何输入更改时，电子邮件都会更改。如果您希望在从输入中移除焦点时更改“模糊”，则可以轻松地将“键盘”更改为“模糊”。

First Name: <input type="text" id="firstName" name="firstName"><br><br>
Last Name: <input type="text" id="lastName" name="lastName"><br><br>
Fake email: <input type="text" id="email" name="email"><br>
<script>
  var suffix = '-noemail@email.com';
  
  var firstName = document.getElementById('firstName');
  var lastName = document.getElementById('lastName');
  var email = document.getElementById('email');
  
  function makeFakeEmail() {
  	var fakeEmail = firstName.value + lastName.value + suffix;
    email.value = fakeEmail;
  }
  
  firstName.addEventListener('keyup', makeFakeEmail);
  lastName.addEventListener('keyup', makeFakeEmail);
</script>