Enter 키를 누를 때 기능 호출

Enter 키를 누를 때 기능 호출

---

Enter 키를 눌렀을 때 knockout.js를 사용하여 함수를 호출하는 방법 .. 여기에 내 코드가 있습니다.

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);
        }

     }
 }

여기에서 무엇이 잘못되었는지 또는 더 나은 접근 방식에 대한 제안에 대한 아이디어가 있습니다.

---

자신 만의 녹아웃 bindingHandler를 만들 때 다른 bindingHanlders와 같은 방식으로 사용됩니다. 예 : data-bind="text: myvalue"

따라서 HTML은 다음과 같아야합니다.

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

추가해야 할 중요한 바인딩은 valueUpdate: 'afterkeydown'바인딩입니다. 이 바인딩이 없으면 사용자가 입력에 텍스트를 입력하고 엔터를 누를 때 enterkey바인딩 전에 onblur 이벤트가 발생하지 않습니다 . 이로 인해에서 호출 한 작업에서 입력 값에 액세스하면 Observable이 현재 텍스트가 아닌 예상치 못한 값을 반환합니다 enterKey.

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;
        });
    }
};

---

No need for a custom binding, just use knockout's keypress event(Knockout docs):

<input type="text"
       data-bind="textInput : keyword, 
                  event: {keypress: onEnter}" >
</input>

And your function:

that.onEnter = function(d,e){
    e.keyCode === 13 && that.search();  
    return true;
};

JSFiddle example

EDIT: New binding from knockout(3.2.0) : textInput - obviates the need to have a valueUpdate binding.

---

This worked for me, thanks to @DaafVader for most of it.

in view

<input data-bind="value: searchText, valueUpdate: 'input', event: { keyup: searchKeyUp }" />

in viewmodel

var searchKeyUp = function (d, e) {
    if (e.keyCode == 13) {
        search();
    }
}

---

And this worked for me, thanks to @DaafVader.

in view:

<input id="myInput" type="text" 
      data-bind="value : keyword, valueUpdate: 'afterkeydown'">
</input>

in javascript:

$("#myInput").keyup(function (event) {
        if (event.keyCode == 13) {
            search();
        }
});

To put keyup event in your jquery event instead of knockout event reduced the complexity of the knockout viewmodel.

---

Use the submit binding (http://knockoutjs.com/documentation/submit-binding.html) on the form around your input, that's what it's made for.

Example from the Knockout docs:

<form data-bind="submit: doSomething">
    ... form contents like inputs go here ...
    <button type="submit">Submit</button>
</form>

<script type="text/javascript">
    var viewModel = {
        doSomething : function(formElement) {
            // ... now do something
        }
    };
</script>

It also automatically handles your button if there is one.

ReferenceURL : https://stackoverflow.com/questions/23087721/call-a-function-on-enter-key-press