按下回车键时调用函数 [英] Call a function on enter key press

问题描述

按下回车键时如何使用knockout.js 调用函数.. 下面是我的代码.

ko.bindingHandlers.enterkey = {初始化:函数(元素，valueAccessor，allBindingsAccessor，viewModel){var inputSelector = '输入，文本区域，选择';$(document).on('keypress', inputSelector, function (e) {var allBindings = allBindingsAccessor();$(element).on('keypress', 'input, textarea, select', function (e) {var keyCode = e.which ||e.keyCode;如果(密钥代码！== 13){警报('a');返回真；}var target = e.target;目标.模糊()；allBindings.enterkey.call(viewModel, viewModel, target, element);警报('b');返回假；});});}};ko.applyBindings(viewModel);

HTML

视图模型

function contactsModel(){var self = this;self.jid=ko.observable();self.userName=ko.observable();self.sendMsgText=ko.observable();self.sendMessage = function(){if(self.sendMessageText() == '' )alert("在输入框中输入内容");别的{变量消息 = {到: self.userName(),消息:self.sendMsgText()}self.sentMessages.push(message);发送消息(消息)；}}}

任何关于这里有什么问题的想法或对更好方法的建议.

解决方案

当您创建自己的淘汰绑定处理程序时，它的使用方式与其他 bindingHanlders 相同，例如:data-bind="text: myvalue"

所以你的 HTML 需要看起来像这样

<input type="text" data-bind="value:sendMessageText, valueUpdate: 'afterkeydown', enterkey: sendMessage"/>

要添加的一个重要绑定是 valueUpdate: 'afterkeydown' 绑定.如果没有此绑定，当用户在输入中键入文本并点击 enter 时，不会在 enterkey 绑定之前引发 onblur 事件.如果在 enterKey 调用的操作中访问输入的值，这会导致 observable 返回一个意外值而不是当前文本.

KnockoutJS 的自定义绑定再看

编辑
这是我之前在其他项目中使用过的.JsFiddle 演示

ko.bindingHandlers.enterkey = {初始化:函数(元素，valueAccessor，allBindings，viewModel){var 回调 = valueAccessor();$(element).keypress(function (event) {var keyCode = (event.which ? event.which : event.keyCode);如果(keyCode === 13){回调.调用(视图模型)；返回假；}返回真；});}};

How to call a function using knockout.js when enter key is pressed.. here is my code below.

ko.bindingHandlers.enterkey = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var inputSelector = 'input,textarea,select';
    $(document).on('keypress', inputSelector, function (e) {
        var allBindings = allBindingsAccessor();
        $(element).on('keypress', 'input, textarea, select', function (e) {
            var keyCode = e.which || e.keyCode;
            if (keyCode !== 13) {
                alert('a');
                return true;
            }

            var target = e.target;
            target.blur();

            allBindings.enterkey.call(viewModel, viewModel, target, element);
            alert('b');
            return false;
        });
    });
}
};
ko.applyBindings(viewModel);

HTML

<input type="text" data-bind="value:sendMessageText, enterkey: sendMessage" /> 

ViewModel

function contactsModel(){
    var self = this;
    self.jid=ko.observable();
    self.userName=ko.observable();
    self.sendMsgText=ko.observable();
    self.sendMessage = function(){
        if(self.sendMessageText() == '' )
            alert("Enter something in input field");
        else{
            var message = {
                to : self.userName(),
                message : self.sendMsgText()
            }
            self.sentMessages.push(message);
            sendMessage(message);
        }

     }
 }

Any idea's about what is wrong here or suggestions for better approach.

解决方案

When you create your own knockout bindingHandler, it is used in the same way as the other bindingHanlders eg: data-bind="text: myvalue"

so your HTML will need to look something like this

<input type="text" data-bind="value:sendMessageText, valueUpdate: 'afterkeydown', enterkey: sendMessage" />

An important binding to add is the valueUpdate: 'afterkeydown' binding. Without this binding when a user types text in the input and hits enter the onblur event is not raised prior to enterkey binding. This results in the observable returning an unexpected value and not the current text if the input's value is accessed in an action invoked by enterKey.

Another Look at Custom Bindings for KnockoutJS

EDIT
This is what I have used previously on other projects. JsFiddle Demo

ko.bindingHandlers.enterkey = {
    init: function (element, valueAccessor, allBindings, viewModel) {
        var callback = valueAccessor();
        $(element).keypress(function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode === 13) {
                callback.call(viewModel);
                return false;
            }
            return true;
        });
    }
};

这篇关于按下回车键时调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！