可以将keyup绑定到整个表单吗?

Posted

技术标签:

【中文标题】可以将keyup绑定到整个表单吗?【英文标题】:Possible to bind keyup to entire form? 【发布时间】:2014-04-22 03:31:38 【问题描述】:

是否可以将keyup() 绑定到整个<form>?例如,我在一个表单中有多个<input type="text"> 字段,我想将keyup 事件绑定到所有字段,而不必为每个字段附加keyup 事件处理程序。相反,我想将一个keyup 事件处理程序绑定到所有这些,因此如果任何文本字段检测到keyup 事件,事件处理程序将运行。这在 jQuery 中可能吗?

我试过了:

$('form').keyup(function() ...);

但这使得 keyup 事件处理程序在输入一个字符后无限期地触发。

【问题讨论】:

【参考方案1】:

我认为这是不可能的,但您可以一次将相同的 keyup 事件绑定到所有输入:

$('#myform input[type=text]').on('keyup', /* yada */);

【讨论】:

【参考方案2】:

你可以试试这样的:Fast Demo

$(function()
   //create one instance for handler:
   var myHandler = function(e) /* Your function */ ;

   //Bind it:
   $("#form input[type=text]").on('keyup',function(e) myHandler(e);  );

);

【讨论】:

为什么要将函数包装在另一个函数中? @TimWolla $(function() ...)$(document).ready(function() ...) 相同 @ShlomiHassid 我说的不是jQuery(document).ready 一个,而是你里面的另一个on 函数。 @JasonP 我知道,请参阅我对 Shlomi 的回复。 他可能想要为任何输入字段做一些特定的事情 - 最重要的是捕捉事件以供以后使用,例如e.keyCode 没有它你无法通过事件......

以上是关于可以将keyup绑定到整个表单吗?的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 element-ui中input的@keyup.native.enter='onQuery'回车查询刷新整个表单的解决办法

表单事件(jQuery)

antd表单组件的双向绑定

模型未在表单提交时更新,使用 Backbone + Stickit

我可以以编程方式触发淘汰视图模型更新吗?

如何防止表单占据整个视图