jquery - 生成随机电子邮件地址并隐藏表单字段

Question

我有一个表格，需要填写一个唯一的电子邮件地址。我不一定需要人们的电子邮件地址，所以我的解决方案是编写一个生成虚拟电子邮件地址的脚本。脚本应该像这样工作：

• 单击链接生成随机电子邮件地址（我已完成）
• 电子邮件地址在表单字段中填充（我已经完成了）
• 然后表单字段被隐藏（未完成，因此用户不会编辑随机电子邮件地址）
• 如果再次单击，生成随机电子邮件地址的链接应该执行相反的操作（因此用户可以再次单击该链接并且表单字段再次出现但为空，因此用户可以根据需要输入实际的电子邮件地址）

我只是无法完成缺失的元素。有人可以提供一些帮助吗？

这是我所做的 JSFiddle：https ://jsfiddle.net/faye4tj5/

<script>
    var randomemail = "@dummyaddress.com";
    var randomnumber=Math.floor(Math.random()*1000000000); 

    function setRandomEmail() { $('#email-field').val( randomnumber + randomemail ); }

        $('#random-hold').on('click','.generate-random', setRandomEmail);
</script>

<p id="random-hold" style="font-size:18px;font-weight:600;line-height:1;"><a class="generate-random" style="display:inline-block;margin-top:20px;margin-bottom:10px;">Click here to generate random email address</a></p>
<form>
<input type="text" id="email-field">
</form>

提前致谢。

标签： jquery

Answer 1

您可以跟踪该值是否是使用data属性生成的（例如<input ... data-generated="1" />：）

生成后，您可以将输入设置为，disabled以便用户无法更改值（例如<input ... disabled />：）

因此输入的生成状态如下所示：

<input type="text" id="email-field" name="email" 
    value="[e-mail]" data-generated="1" disabled>

再次单击该按钮会将输入重置为

<input type="text" id="email-field" name="email" value="">

jsfiddle

$('#random-hold').on('click','.generate-random', () => {
  let email = $('#email-field');
  if (email.data('generated') === '1') {
    email.val('');
    email.removeData('generated');
    email.removeAttr('disabled');
  } else {
    email.val(Math.floor(Math.random() * 1000000000) + "@dummyaddress.com");
    email.data('generated', '1');
    email.attr('disabled', 'disabled');
  }
});

或者，您可以考虑在没有 jQuery的情况下使用 vanilla Javascript/ES6 来完成所有这些操作。

document.querySelector('.generate-random').addEventListener('click', () => {
  let email = document.myForm.email;
  if (email.getAttribute('data-generated') === '1') {
    email.value = '';
    email.removeAttribute('data-generated');
    email.removeAttribute('disabled');
  } else {
    email.value = Math.floor(Math.random() * 1000000000) + "@dummyaddress.com";
    email.setAttribute('data-generated', '1');
    email.setAttribute('disabled', 'disabled');
  }
});