I have a table on my mvc razor page and each table cell has an textbox. I am using MVC 3 with javascript and knockout js.
I have added some keyboard shortcuts so the when the user presses ctrl and then one of the arrows keys,
the cursor moves around the table to the next appropriate textbox based on what key was pressed and where the current position of the cursor is.
I have done this using a javascript method and jquery.hotkeys.
The problem I am having is that I am unable to write any text in any of the textboxes that calls the javascript method keypress.
From what I can understand is the method is being called eveytime there is a key press and this is preventing me from being able to write anything in the textbox.
Any help on this would be very much appreciated.
Thank you very much for your reply. However, the code you mentioned does not seem to work. Please could you advise on how to get it working or what might be wrong?
young345
Member
201 Points
720 Posts
Cannot type text in texbox that calls keydown method
Jan 02, 2013 08:55 AM|LINK
Hi,
I have a table on my mvc razor page and each table cell has an textbox. I am using MVC 3 with javascript and knockout js.
I have added some keyboard shortcuts so the when the user presses ctrl and then one of the arrows keys,
the cursor moves around the table to the next appropriate textbox based on what key was pressed and where the current position of the cursor is.
I have done this using a javascript method and jquery.hotkeys.
The problem I am having is that I am unable to write any text in any of the textboxes that calls the javascript method keypress.
From what I can understand is the method is being called eveytime there is a key press and this is preventing me from being able to write anything in the textbox.
Any help on this would be very much appreciated.
Thank you
This is my table:
<tr> <td> <input type="text" data-bind="value: D, event: { keydown: function(data, event) { keypress(data, event, $index()) } }, attr: { name: 'MyForm['+$index()+'].D', id: 'MyForm_'+$index()+'_D'}" /> </td> <td> <input type="text" data-bind="value: C, event: { keydown: function(data, event) { keypress(data, event, $index()) } }, attr: { name: 'MyForm['+$index()+'].C', id: 'Myform_'+$index()+'_C'}" /> </td> <td> <input type="text" data-bind="value: B, event: { keydown: function(data, event) { keypress(data, event, $index()) } }, attr: { name: 'MyForm['+$index()+'].O', id: 'MyForm_'+$index()+'_O'}" /> </td> </tr>Javascript method - please note I have only included a few of the the textbox bindings so you can see how I am binding the textbox to the key press:
function keypress(data, event, rowIndex) { var nextRowIndex = rowIndex; $('#MyForm_' + rowIndex + '_D').bind('keydown', 'ctrl+down', function () { nextRowIndex = nextRowIndex + 1; $("#MyForm_" + nextRowIndex + "_D").focus(); }); $('#MyForm_' + rowIndex + '_D').bind('keydown', 'ctrl+up', function () { nextRowIndex -= 1; $("#MyForm_" + nextRowIndex + "_D").focus(); }); $('#Myform_' + rowIndex + '_D').bind('keydown', 'ctrl+right', function () { $("#MyForm_" + nextRowIndex + "_C").focus(); }); }AlexMgn
Member
102 Points
24 Posts
Re: Cannot type text in texbox that calls keydown method
Jan 10, 2013 04:51 AM|LINK
Hi. You've rebind keypress event on your textbox, so your code prevent to put any character to your textbox.
Now you have to add one line of code, that will read charcode and add character to textbox.
It's will look like
$('.myTextBox').text($('.myTextBox').text()+String.fromCharCode(event.code));(I'm not sure that 'event.code' is correct, but you can always view jQuery.keypress() API to ensure)
young345
Member
201 Points
720 Posts
Re: Cannot type text in texbox that calls keydown method
Jan 24, 2013 08:43 AM|LINK
Hi,
Thank you very much for your reply. However, the code you mentioned does not seem to work. Please could you advise on how to get it working or what might be wrong?
Thank you very much.
AlexMgn
Member
102 Points
24 Posts
Re: Cannot type text in texbox that calls keydown method
Jan 24, 2013 09:55 AM|LINK
Following your code I've create test page and try it.
Code working just fine and I'm not getting troubles with write text.
So, my suggestion is try use another jQuery version. You can try use google sdn link
http:
//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.jsAnother suggestion - use firebug extension (FireFox or Chrome) to be sure, that your jQuery load proper.
Sorry for my English. It's not my native language