B4J Question [abmaterial] Enter Key

[TimN]

Adding additional Javascript file via page.AddExtraJavaScriptFile("/js/kff.js")

I know this code works as we are using in a different site.


kff.js Contents below

  /*********************************************************************************************
  Allow Up, down enter keys to navigate grid
  **********************************************************************************************/
  $('input').keydown( function(e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    //13=enter 40=down arrow 38=up arrow
    if(key == 13 || key == 40 || key ==38)  {
      e.preventDefault();
   
      var inputs = $(this).closest('form').find('input[type=text]');
      if (key==38)
        {inputs.eq( inputs.index(this)-1 ).focus();
        inputs.eq( inputs.index(this)-1 ).select();}
      else
        {inputs.eq( inputs.index(this)+ 1 ).focus();
        inputs.eq( inputs.index(this)+ 1 ).select();
        if (key==13)
          {return false;}
      }
    }
  }); //end of input keydown

 

[OliverA]

Is this a question or a code sample?

 

[TimN]

Sorry. I wasn't very clear.

I am asking if anyone has an idea why I can't get this code to work as I have successfully used it in the past. I want my users to be able to move around my page with enter key and up and down arrows. I am new to abmaterial.

 

[alwaysbusy]

Is this a custom component? Because for example, there are no forms in ABM so this code can't definitely not work on standard ABM controls:

var inputs = $(this).closest('form').find('input[type=text]');

As ABM runs on the server side, keydown and keyup events are very restricted in ABM (just enters and tabs) because making the roundtrip from your browser to the server and back is to expensive and would kill your server.
Your selector for the inputs will also have to be a lot more specific to overrule the default ABM keydown events:

$('input').  '<--- way to global, as the Materialize CSS framework has already build-in events one the normal 'input' selector

 

[TimN]

Thanks for the clarity.

I just need a way to move from input to input via the the enter key or arrow keys. I do not need key up/down events to hit the server.

The default behavior is just to move from input to input via the tab key and I would like at minimum to move on the enter key as well.

 

[TimN]

Alwaysbusy,

I am still struggling to have the enter key act as a tab. I understand my previous JS is inaccurate. So I have tried this.

$(document).ready(function(){
  $('input').keydown( function(e) {
    if( e.keyCode == 13 ){ // if enter key
        var e = jQuery.Event('keydown'); // create a manual event
        e.which = e.charCode = 0;
        e.keyCode = 9; // set the new event to "tab"
        $(this.target).trigger(e); // trigger the new event (on the document)
        return false;  // cancels the original "enter" event from executing
    }

  }); //end of input keydown
});

Is this possible or am I just going about it wrong?

 

[alwaysbusy]

$('input').keydown( function(e) {

You still have the same problem I think: this jQuery selector '$('input')' is to vague and is overruled by the internal workings of Materialize CSS.

You should try to use the existing ABM system, using the input_EnterPressed/TabPressed events and then using the next inputs SetFocus method manually.

Something like this:

Sub inp1_EnterPressed(value As String)
   ' jump to inp2
   Dim inp2 As ABMInput = page.Component("inp2")
   inp2.Setfocus
   inp2.Refresh
End Sub

Sub inp1_TabPressed(target as String, value As String)
   ' use the same as for the enter
   inp1_EnterPressed(target)
End Sub

Sub inp2_EnterPressed(value As String)
   ' jump to inp3
   Dim inp3 As ABMInput = page.Component("inp3")
   inp3.Setfocus
   inp3.Refresh
End Sub

Sub inp2_TabPressed(target as String, value As String)
   ' use the same as for the enter
   inp2_EnterPressed(target)
End Sub

 

[alwaysbusy]

If you want to do it purely on the Browser side, you will have to dive into the B4JS tutorials, but this is more complex e.g. here: https://www.b4x.com/android/forum/threads/abmaterial-b4js-07-the-ui-connection-part-2.90931/#content

 

[TimN]

Thank you for this suggestion. I have implemented. Small problem is when moving thru input fields with enter the existing data is not highlighted for over typing as it does when using the tab key. Any idea?

I will take a look at the b4js tutorials.