B4J Question [abmaterial] Enter Key

TimN

Member
Licensed User
Longtime User
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
B4X:
  /*********************************************************************************************
  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

Expert
Licensed User
Longtime User
Is this a question or a code sample?
 
Upvote 0

TimN

Member
Licensed User
Longtime User
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.
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
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:

B4X:
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:

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

TimN

Member
Licensed User
Longtime User
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.
 
Upvote 0

TimN

Member
Licensed User
Longtime User
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.

B4X:
$(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?
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
$('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:
B4X:
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
 
Upvote 0

TimN

Member
Licensed User
Longtime User
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.
 
Upvote 0
Top