使用 jQuery 在字段输入时增加计数器答案

【问题标题】：Increment counter upon field input with jQuery使用 jQuery 在字段输入时增加计数器
【发布时间】：2021-08-11 09:23:43
【问题描述】：

我想创建一个联系表单字段（对用户不可见），其链接的无按钮计数器在源代码中填充后立即递增 1（为此我选择了输入功能，而与数字无关输入的字符数）。输入值 != 0 后，表单提交将被阻止。如果我测试它（在我的 IDE 预览网站上的“可见”模式下）并输入一些东西，计数器会工作并显示“1”。

如果我删除我的输入，单击它并再次输入一些内容，它不会进一步增加，仍然显示“1”。这一切都没有刷新我的页面，将计数器值存储在 local.storage 中，我的页面上一直显示“1”。

$("#mail_conf").on("input", function(){
  $("#counter").html(function(val){
    return val+1;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="email" id="mail_conf" name="user_email_conf" placeholder="E-mail conf.*">
<div id="counter">0</div>

【问题讨论】：

请问这个计数器的用途是什么？您似乎正在尝试评估 <input> 是否有或曾经有过条目？但是，如果输入了数据，您会阻止表单提交吗？
如果您使用的是<form> 和<input type="email />，则在浏览器验证输入之前不应提交表单。
请检查我的回答并标记如果它解决了您的问题，请点击分数下方的复选标记将其标记为已接受。
@DavidsaysreinstateMonica - 确切地说，它可以作为一种统计数据，例如，有多少不受欢迎的访客滞留在那里，而无需在数据库中收集他们的 IP 等。
@Andy 是的，我还实现了一个提交函数 = false if length>0

标签： javascript jquery input counter increment

【解决方案1】：

$("#mail_conf").on("input", function () {
  // first arg is index, 2nd is oldhtml. `+val` converts the string to an int
  $("#counter").html("1")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="mail_conf">
<p id="counter">0<p>

这能解决您的问题吗？

我注意到的问题是您试图将.html() 与一个函数一起使用，根据文档，该函数作为第一个参数index 和oldhtml 作为第二个参数返回。 https://api.jquery.com/html/#html-function

【讨论】：

感谢您的回答，但这并不是我想要的，因为这就像一种更改功能（计算每个字符），它应该返回 e。 G。 "1"，如果输入 1 甚至 500 个字符
@Ann-Diana 您最初的问题和 ID 名称具有误导性。根据您最初的询问，我了解到您需要一个计数器（尤其是根据元素 ID 名称判断）。如果您想在每次更改值时显示1，只需使用此：$("#counter").html("1");
非常感谢您的回复，第一个访问者输入内容时会显示 1，下一个访问者会显示 2，依此类推...抱歉，如果这具有误导性，此输入字段旨在捕获机器人
@Ann-Diana 你不能单独使用 JavaScript 做到这一点。 JS 无法记住访问者，因为它在访问者的计算机上本地运行。为此，您需要一个服务器端计数器，并使用 JavaScript Fetch API 或 XHR 来触发它。使用 localStorage 您可以计算同一用户访问该页面的次数。
虽然这对我来说不是最好的消息（我希望参与的少得多，显然现在需要熟悉服务器端，哈哈），我非常感谢您提供的宝贵信息跨度>