Why cant I type in my textbox with keydown event?

1,950 views
Skip to first unread message

sk...@btconnect.com

unread,
Jan 24, 2013, 10:27:02 AM1/24/13
to knock...@googlegroups.com
Hi,

I am using knockout js for my textbox. 
I have added a keydown event which calls a javascript function. 
The javascript function works, however, the problem I am facing is I cant actually type any text in the textbox because of this keydown event.

I have checked and I can type text in a textbox with uses this javascript method, that is not knockout js bound.

Please can someone explain to me why this and what the difference is and how I can over come this?
I have been struggling with this problem for a very long time now and help on it would be very much appreciated.

The following is my code.

Thank you very much

function keypressdown() {
   var event = window.event;

    var keyCode = event.keyCode || event.which,
        arrow = { left: 37, up: 38, right: 39, down: 40 };

    if (event.ctrlKey) {
        switch (keyCode) {
            case arrow.left:
                alert('ctrl + left');
                break;
            case arrow.right:
                alert('ctrl + right');
                break;
            case arrow.up:
                alert('ctrl + up');
                break;
            case arrow.down:
                alert('ctrl + down');
                break;
        }
    }
}

<input type="text" data-bind="value: MyValue, 
                              event: { keydown: function(data, event) { keypressdown() } },
                              attr: { name: 'MyForm['+$index()+'].MyValue', 
                              id: 'MyForm_'+$index()+'_MyValue'}"  />

Michael Latta

unread,
Jan 24, 2013, 11:45:06 AM1/24/13
to knock...@googlegroups.com
I would suggest passing the event from the binding into the function. Another way to structure this is to use the name of the function rather than a chunk of js that calls the function. Then the function will need to take the arguments the event handler is expected to have. Putting a function in line in the binding may be causing you issues.

Michael
> --
>
>

Matt Hicks

unread,
Jan 24, 2013, 1:13:00 PM1/24/13
to knock...@googlegroups.com
Returning true from your click handler function will cause default handlers to run.  See http://knockoutjs.com/documentation/event-binding.html note #3.

sk...@btconnect.com

unread,
Jan 24, 2013, 4:16:24 PM1/24/13
to knock...@googlegroups.com
Hi,
Thank you so much for your reply. I'm very new to knockout js. Would it be possible to provide me with an example of the ideas you are suggesting?
It would be very much appreciated as this is something I have been struggling with for a few weeks now.
I would be very grateful of any help given.
Thank you

sk...@btconnect.com

unread,
Jan 25, 2013, 3:11:27 AM1/25/13
to knock...@googlegroups.com
Hi,

Thank you so much for your advise, it worked when I returned true in the event handler. I just did this:

 event: { keydown: function(data, event) { keypressdown(); return true; } },


On Thursday, 24 January 2013 18:13:00 UTC, Matt Hicks wrote:

Matt Hicks

unread,
Jan 27, 2013, 11:08:16 AM1/27/13
to knock...@googlegroups.com

On Friday, January 25, 2013 3:11:27 AM UTC-5, sk...@btconnect.com wrote:

 event: { keydown: function(data, event) { keypressdown(); return true; } },


You could also write the event binding as

event: { keydown: keypressdown }

and the event handler function as

function keypressdown(data, event) {
   
// code...
   
return true; // pass event to default handler
}

This method keeps more logic out of the view.

Reply all
Reply to author
Forward
0 new messages