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

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>

提前谢谢。

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="">

jsfidd

$('#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');
}
});