Cannot type text in texbox that calls keydown method RSS

• • Reply
  

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

  
  
  

  
  
  

• • Reply
  

  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)
  
  

  Share your knowledge for free
  • Edited by Yanping Wang - MSFT on Jan 15, 2013 07:27 AM
  • Edited by young345 on Jan 24, 2013 08:40 AM
• • Reply
  

  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.

• • Reply
  

  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.js

  Another 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

  Share your knowledge for free
  • Edited by AlexMgn on Jan 24, 2013 09:55 AM