Question

我只是想知道如何使用jQuery的onEnter

来敲除$(document).on("keypress", "form"...

因为每次按下form中的输入，它都会将公式提交给服务器。

使用event.preventDefault()会阻止提交表单，但这也会阻止敲除onEnter ...？！

$(document).on("keypress", "form", function (event)
{
    if ($(event.target).closest("input[data-bind*='onEnter']")[0])
    {
         event.preventDefault(); //preventing form to be submitted
         return true;//but the function behind 'onEnter' will not be trigered
    }

    if (event.keyCode == 13)//Enter
    {
         event.preventDefault();
         return false;
    }
});

在上述代码之后如何触发onEnter？

由于

Answer 1

首先，如果您要使用JQuery，则需要将其保留在Knockout的上下文中，否则您将在绑定中遇到重大问题，并在事情发生变化时更新视图。此外，您在当前代码中必须调用viewmodel.yourMethod - 这不太理想。

话虽这么说，值得创建自己的bindingHandler来处理这个问题，然后将处理程序添加到你想要的任何元素中。

这还没有经过测试，但会让你到达附近。

// the custom binding handler, its called executeOnEnter
ko.bindingHandlers.executeOnEnter = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
        // in this case, element is the html element you bound the handler - so perhaps your form tag
        $(element).keypress(function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            // the enter key
            if (keyCode === 13) {
                allBindings.executeOnEnter.call(viewModel);
                event.preventDefault();
                return false;
            }
            return true;
        });
    }
};

然后，您可以将其附加到您的表单，例如：

<form data-bind="executeOnEnter:theFunctionInYourViewModelToCall" >

Answer 2

您必须让Knockout在您的应用程序中执行所有顶级事件处理。

内置submit绑定可捕获表单的submit事件：

<form data-bind="submit: captureEnter"></textarea>

对于所有其他事件，内置event绑定的作用相同：

<textarea data-bind="event: {keypress: captureEnter}"></textarea>

在viewmodel的captureEnter方法中，您可以查看密钥代码并对Enter键做出反应：

self.captureEnter = function (vm, event) {
    var keyCode = event.keyCode || event.which;

    if (keyCode === 13) {
        // do something...
    } else {
        return true; // let the event do what it normally would do
    }
});

默认情况下，Knockout prevents the default action of an event。使用return true;允许默认操作（即“表单已提交”或“字符出现在文本区域中”等）。

如何使用$（document）.on（“keypress”，“form”）使用knockout“onEnter”

2 个答案: