繁体   English   中英

输入文字时触发的EventListener,但删除输入时不触发

EventListener that triggers when text input, but NOT when input is deleted

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

背景

我正在将事件侦听器添加到HTML表单中,以检查每个字段中的输入是否有效。 例如:

inputElement.addEventListener("input", function(event) {
        if (!isValid(input.value)) {
            input.setCustomValidity("Input is invalid");
        } else {
            input.setCustomValidity("");
        }
});

但是,有问题的表单字段不是必填字段-用户可以在表单字段为空的情况下提交表单,但不能在输入无效的情况下提交表单。

问题

如果用户提交表单时从未触摸过该输入(将其留空),则"input"事件将永远不会发生,并且可以提交表单。 (好)

如果用户输入了不正确的输入并提交了表单,则他们将收到警告消息"input is invalid" (好)

但是,如果他们输入无效的输入,得到警告消息,然后删除输入,警告消息将出现,并且表单现在将提交。 (坏)

发生这种情况是因为删除输入的行为触发了input事件。

进度

我尝试使用textInput事件代替,但行为却相同。 我已经检查了其他可用事件,但看不到可以解决此问题的事件。

可以通过修改isValid函数使其工作(如果给定一个空字符串来返回true ,但如果可能的话,我想避免这种情况。 原因是:我在这里简化了示例,但实际上函数实际上是isValidServiceId ,从技术上讲,空字符串不是有效的服务ID。

1 个回复

您可以修改条件逻辑以说“如果输入已填充 无效”,而不仅仅是“如果输入无效” ...

inputElement.addEventListener("input", function(event) {
  if (input.value.length && !isValid(input.value)) {
    input.setCustomValidity("Input is invalid");
  } else {
    input.setCustomValidity("");
  }
});
1 在javascript中输入文字时触发事件

我的页面上有上述元素。 onkeyup事件将按预期触发并运行功能Validate 。 功能Validate (正如你可能已经猜到了)验证基于一些参数输入,如果验证结果为true , Validate试图触发事件onvalidated “sokeord”输入元素,但onvalidated ...

2 输入文字时不触发搜索栏

我正在尝试使搜索栏起作用,但是当我在其中输入文字时,它不会过滤任何内容。 有人可以看一下代码,然后告诉我可能是什么问题吗? 目录中显示的所有项目都是从我创建的JSON文件夹中提取的数据。 由于篇幅原因,我取出了所有导入的元素/库。 ...

3 为什么在输入时触发这个 onClick 函数?

我真的很困惑,因为我正在学习使用钩子并且我正在研究 useState 钩子,当我偶然发现这个时,当我在输入上输入时触发了 onClick 函数。 这是代码: 当我在输入字段上输入时,计数会被记录下来,这是我修复它的方式: 如您所见,唯一改变的是,我没有将 onClick 的事件编写为箭头函 ...

4 在点击和输入时触发事件

我的网站上有一个搜索框。 当前,用户必须单击框旁边的“提交”按钮才能通过jquery的帖子进行搜索。 我想让用户也按Enter键进行搜索。 我怎样才能做到这一点? JQUERY: HTML: ...

5 防止在输入时触发TextBox

我正在与Ajax一起从数据库检索信息,而无需刷新页面。 我有一个asp:TextBox ,它使用TextChanged触发Ajax事件(当我从TextBox失去焦点时)。 现在,我想禁用单击“输入”的选项,因为它随后会调用Ajax事件,但由于某种原因也会刷新页面。 如果设法通过添加OnKe ...

6 按钮输入时提交触发

对于专业人士来说,这可能是个小问题。 我想知道是否将输入提交按钮替换为按钮(类型=提交),是否仍会在输入(键盘)时触发,如果是,那么哪个浏览器不会触发它? ...

8 停止输入时触发角度触发

我想在Angular中重用我的工作jQuery函数,它有两个函数,一个在keyup上调用,另一个在keydown上调用 这样每次keydown时计数器都会重置。 但是,这不起作用: 3个控制台日志中的每个日志都在控制台中写入相同的编号,并且每次按键后它们都会递增写入(即0 0 ...

2017-07-18 13:08:49 1 2234   angular
9 单击其他输入时在输入上触发jquery函数

我正在创建一个动态添加的输入表单。 我想这样做,以便当输入失去焦点时,将其值附加.00 。 到目前为止,我已经尝试过了: 我的问题是,仅当我单击其他div但输入时它才起作用。 另外,我还想实现的是,当我在一个输入上编辑内容,然后将焦点切换到其他输入时,先前的输入值附加了.00 。 ...

10 输入文字输入触发按钮单击

我的表格看起来像这样: 出于某种原因,即使我阻止了任何<input type="text">字段中的click事件的默认操作,它仍会触发唯一的<button>的.click() ,而不是当按下回车键时,用于提交表单。 (我希望输入按钮提交表单。) 我的事件 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM