HTML文本输入事件

Posted 2023-04-18

【中文标题】HTML文本输入事件

【英文标题】：HTML text input event

【发布时间】：2010-12-14 18:08:21

【问题描述】：

我有一个表单，并且想要根据表单的输入文本字段是空的还是输入了文本来禁用/启用它的提交按钮。

我认为这意味着对输入文本字段的keydown 或keypress 事件有一个事件处理程序：当它被触发时，这个事件处理程序应该测试输入文本字段是否包含文本，并启用或禁用提交按钮相应地。

change 事件看起来应该比keydown 或keypress 事件更有用，只是它在相关控件失去焦点之前不会被触发，这有什么好处：因为用户只想输入一些内容然后单击提交按钮，我想要一个由输入的文本触发的事件处理程序，而不仅仅是当控件失去焦点时。

我的问题是：

keydown 和/或keypress 事件是在相应文本插入输入文本字段之前还是之后触发的？ keydown 和/或keypress 事件是否可以取消（您可以取消它们以防止输入相应的文本）吗？

---

编辑：仅供参考，jQuery validation plug-in 重新测试表单的有效性。

【参考方案1】：

回答您的问题...

keydown 或 keypress 事件可以 在输入文本之前被截取 使用 javascript 绑定a后可以返回false 对 keydown 或 keypress 起作用 事件。这将阻止文本 被输入。

使用 jQuery 的示例：

$("#inputfield").live("keydown", function()
    return false;
);

如果您想在表单提交中测试一些输入值，您可以使用 jQuery submit() 来实现。

$("#theform").submit(function() 
    var formval = $("#theinput").val();
    if(formval == "")  //or some better test
        alert("input value"); //or some other alert...
        return false;
     else 
        return true;
    
);

返回 false 将使点击提交表单无效。

编辑： 如果如您在 cmets 中所说，您想禁用表单的提交，直到满足输入字段的要求

$("#inputfield").live("keyup", function()
    if($("#inputfield").val() == "") 
        $('#button').attr("disabled", true); 
     else 
        $('#button').attr("disabled", false); 
    
);

您想使用“keyup”事件处理程序来允许首先发送文本。看我的例子：on jsbin

【讨论】：

如果它们在输入文本之前就被触发了，难道这不会使它们对我打算使用它们的目的（即测试输入字段是否包含文本）毫无用处吗？我可以改用什么其他机制（根据输入字段是否包含文本来启用/禁用提交按钮）？

您可以在提交时进行测试以检查输入字段中是否有内容。

这样做会比我想要的要晚一点：至少在桌面应用程序中，根据它是否有效/可点击来实时启用/禁用对话框的“确定”按钮是很常见的。相反，您是说让按钮始终可单击（以便始终可以调用 onsubmit），但是要签入 onsubmit （并且我想显示一条错误消息以说明需要一个字段）。我意识到这是在浏览器中执行此操作的常见/常用方式；我想知道该技术（即可用事件的行为）是否甚至支持其他 UI。

当然你可以禁用它，直到输入文本。 （这将给出缺少某些东西的视觉线索。）只需在每个 keydown 上测试输入值并切换禁用属性： $('#target').attr("disabled", true);只要满足您对该领域的要求。

但是您说在输入文本之前会触发 keydown：因此在 keydown 中进行测试还为时过早，无法知道输入字段是否包含文本。