无法在 Javascript 中将用户输入作为电子邮件链接返回
Posted
技术标签:
【中文标题】无法在 Javascript 中将用户输入作为电子邮件链接返回【英文标题】：cannot return user input as email link in Javascript 【发布时间】：2018-07-17 01:01:52 【问题描述】：我正在尝试让我的 userText 输出将 userEmail 显示为一个超链接，该超链接将打开一个电子邮件服务，其中的电子邮件地址是 userEmail。我究竟做错了什么？如果我使用变量 emailLink（而不是 userEmail），则会显示超链接，但它不适用于 href 标签，因此电子邮件被发送到 a href 标签。不知道还有什么可以尝试的......请帮忙，谢谢......
<html>
<form>
<fieldset>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required onchange="required();">
</label>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
<label>Click Here
</label>
<input type="button" value="clickMe" onclick="validateForm();">
</fieldset>
<p id = "text"></p>
</form>
<script>
function validateForm()
var userTown = document.getElementById('town').value;
var userEmail = document.getElementById('email').value;
var emailLink = userEmail.link();
var userText = userTown +'\'s a Great Town!' + '<br><br>' + ' If you don\'t believe me, click the link and ask this dude ' + '<a href="mailto:' + userEmail + '\"></a>' ;
document.getElementById('text').innerHTML=userText;
</script>
</html>
【问题讨论】：
【参考方案1】：您将开始和结束a 标记之间的内容留空，因此用户无法点击任何内容。此外，您在开头的 <a> 标记中有一个不应该存在的反斜杠。
'<a href="mailto:' + userEmail + '\"></a>'
------------------------------------^^ // <-- content between open/close is empty!
所以，应该是：
'<a href="mailto:' + userEmail + '">' + userEmail + '</a>'
另外，不要使用.link()，因为它没有必要且已过时。
function validateForm()
var userTown = document.getElementById('town').value;
var userEmail = document.getElementById('email').value;
var emailLink = userEmail;
var userText =
userTown + '\'s a Great Town!<br><br>If you don\'t believe me, click the link and ask this dude ' +
'<a href="mailto:' + userEmail + '">' + userEmail + '</a>';
document.getElementById('text').innerHTML = userText;
<form>
<fieldset>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required >
</label>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
<label>Click Here
</label>
<input type="button" value="clickMe" onclick="validateForm();">
</fieldset>
<p id = "text"></p>
</form>但是，为了更清洁和更现代的方法。通过只保留需要填充的空元素来完全避免所有字符串的连接。此外，不要使用内联 HTML 事件处理属性（onclick 等），因为它们是 25 年以上的古老技术，不会消亡并且具有 many drawbacks。相反，请使用现代标准和.addEventListener()。
// Set up event handling in javascript, not HTML
document.querySelector("input[type=button]").addEventListener("click", validateForm);
function validateForm()
var userTown = document.getElementById('town');
var userEmail = document.getElementById('email');
var userElement = document.getElementById("user");
var emailLink = document.getElementById("emailLink");
var output = document.getElementById("text");
// Just configure the properties of the pre-existing elements instead
// of creating gobs and gobs of concatenated strings:
user.textContent = userTown.value;
emailLink.href = userEmail.value;
emailLink.textContent = userEmail.value;
output.classList.remove("hidden"); // Unhide the final paragraph
.hidden display:none;
label display:inline-block; width:20em;<form>
<fieldset>
<div>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required >
</label>
</div>
<div>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
</div>
<input type="button" value="Click Me">
</fieldset>
<!-- Notice the class applied to the paragraph? That hides it by default.
Then we have span elements set up as placeholders for dynamic text that
will be inserted by the JavaScript. The same is true for the empty <a> element. -->
<p id="text" class="hidden"><span id="user"></span><span>'s a Great Town!
<br><br>If you don't believe me, click the link and ask this dude </span><a id="emailLink"></a></p>
</form>【讨论】：
【参考方案2】：您缺少a 元素内的内部文本：
function validateForm()
var userTown = document.getElementById('town').value;
var userEmail = document.getElementById('email').value;
var emailLink = userEmail.link();
var userText = userTown +'\'s a Great Town!' + '<br><br>' + ' If you don\'t believe me, click the link and ask this dude ' + '<a href="mailto:' + userEmail + '\">The link!</a>' ; document.getElementById('text').innerHTML=userText;
<html>
<form>
<fieldset>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required onchange="required();">
</label>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
<label>Click Here
</label>
<input type="button" value="clickMe" onclick="validateForm();">
</fieldset>
<p id = "text"></p>
</form>【讨论】：
link() 方法不存在。
是的，就是undefined
@MihaiAlexandru-Ionut 实际上，确实如此。这是一种古老的字符串方法，由 Netscape 发明！
@ScottMarcus，你是对的。这是我第一次听说。
哇！我没听说过！顺便说一句，它已被弃用：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…以上是关于无法在 Javascript 中将用户输入作为电子邮件链接返回的主要内容，如果未能解决你的问题，请参考以下文章
在 Javascript 中将对象 Promise 转换为字符串
如何在 JavaScript 中将 File 对象添加到 FileList 集合中？