输入代码，当用户按Enter键时更改显示价格

Enter a Code, Change Displayed Price When User Presses Enter

本文关键字：显示 Enter 代码 用户 输入      更新时间：2023-09-26

我有一个网站的区块，我需要允许用户输入代码并显示价格变化。代码是任意的，因为实际价格就是代码显示的价格——我只是想让用户觉得它们很"特别"。

<h1 style="text-align: center;">Your choice for a one-time investment of just:</br> 
<a title="JUST $797" href="http://samplesite.com" target="_blank">$797</a></h1>
<p style="text-align: center;"><strong>If you'd prefer a totally custom design, <a title="Custom Mobile Site Design" href="http://samplesite.com" target="_blank">click here</a>.</strong></p>
<center><input type="text" id="EnterCode" /><div id="price" value="Code">Enter Code</div></center>

（"a title="行中的链接在那里，因为我使用的主题不允许我更改字体颜色，所以要让它使用我想要的颜色，我必须让它认为这是一个链接。我必须进入css，稍后再更改它）

因此，给定上面的代码，当前显示的价格是797美元。当用户输入ANY代码并按下回车键时，我希望$797更改为$397。

我在网上找不到任何能给我指明正确方向的东西，所以我来这里问你们。我真的很感激你能提供的任何帮助。

谢谢！

首先，您需要向包含代码的<a>标记添加一个ID。类似这样的东西：

<a id="yourPriceId" title="JUST $797" href="http://samplesite.com" target="_blank">$797</a>

然后，您可以使用Javascript轻松地执行您想要的操作，使用一个事件侦听器来检查用户是否按下了Enter键，如下所示：

var input = document.getElementById("EnterCode"),
    price = document.getElementById("yourPriceId");
input.addEventListener('keyup', function(e) {
    if (e.keyCode === 13 && !!this.value) {
        price.textContent = "$397";
    }
});

注意：只有当用户在按Enter键之前在输入中输入内容时，这才会起作用。如果您想在用户没有输入任何内容的情况下更改价格，那么只需从if语句中删除&& !!this.value即可。

相关文章：