Javascript to detect Enter key press in Mobile App

Javascript to detect Enter key press in Mobile App

  

In a Mobile App 


Is it possible to use Javascript to detect when  the "Enter"  key is pressed ?

If so ... how ?


Hi Omran,

can you explain a little bit better what's the use case here?

Hi 


I have a simple text box in a mobile app ... when the user hits "ENTER", I want to call the action to do a search

I have have a Javascript element on a screen action with the following code :- 


function detectReturn(e) 

{

  if (e.keyCode == '13')

  {

    $actions.SearchMember();

   }

}



The above code is on the keyPress of the Text box


When I debug ... OutSystems goes into the keyPress... steps through the code .. does NOT do anything in the Javascript ... in the  In Use window it says :- JavaScript ( Unavailable ) 

Hi Omran,

Keyboard events work differently in different devices.

Have you seen this:

https://www.outsystems.com/blog/javascript-events-unmasked-how-to-create-input-mask-for-mobile.html

Cheers,

José

At the moment I am just interested in a simple javascript function that that will detect when the - ENTER key is pressed ...... thats all I need 

The following code does not do anything  :- 

           


function detectReturn(e) 

{

  if (e.keyCode == '13')

  {

    $actions.SearchMember();

   }

}




DOES ANYONE ON THIS SITE KNOW HOW TO RUN A SIMPLE BOG STANDARD PIECE OF JAVASCRIPT ???


Solution

Omran Bhatti wrote:


DOES ANYONE ON THIS SITE KNOW HOW TO RUN A SIMPLE BOG STANDARD PIECE OF JAVASCRIPT ???


Hello Omran,

Did you read Jose's answer?

A SIMPLE BOG STANDARD PIECE OF JAVASCRIPT will not work in mobile devices, as different mobile devices have differences on events when the user types any key.

Cheers,
Eduardo Jauch 


Solution

Hi Omran,

Yes! 

Lots of people here know simple javascript. And a few know very advanced javascript.

Also, "shouting" will not get you a faster answer!

Not to get in any further discussion, you could add something like this piece of javascript to the OnReady event of your screen:

document.getElementById("Input_TextVar")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        $actions.SearchMember();
    }
});

Cheers,

José

That article is amazing piece of sleuthing.  For interpreting and working with a mask it's lovely code.

For simply detecting the "enter" key it seems that it is a bit simpler.  The Input Widget Event property, when set to onkeyup or onkeydown will return a keyCode of 13 under Android and iOS for my devices... Nexus 7 (2013) and iPhone 7.  Most other keys under Android return 229... but, in this case, it doesn't matter.

if(event.keyCode==13){
    alert('enter');
}


Thanks Davidk for simple solution.

José, I was trying to use 

addEventListener

but when I've added it to multiple screens I ended up with event firing as many times as I've changed the page (OnReady events fired). Are there any additional steps that should be taken to prevent this? 

Thanks.




Hi Mykola,

For José's solution you will need to use the addEventListener to the OnReady screen event handler, but remember "cleanup after yourself on your way out" and add the removeEventListener to the OnDestroy of the screen.

That being said, I get the feeling Davidk is probably just a streamlined (and more OutSystems-y) way of doing the same thing.

Hi Jorge,

I've tried removeEventListener in OnDestroy but it had no effect. And to use removeEventListener it should not be anonymous function but a named one, right? 

David's solution it very good but for our use case it would be much easier to have one listener on the page that runs generic code - there are several popups with input and a button that should be clicked when enter is pressed. 

Yes, for removeEventListener to work you cannot pass it an anonymous function...

Outsystems should have more videos for how to use Javascript in the applications. Master class which already exist is outdated for mobile apps.

Suraj Borade wrote:

Outsystems should have more videos for how to use Javascript in the applications. Master class which already exist is outdated for mobile apps.


That's the problem with OutSystems, the sheer lack of useful information ! Java ...NET issues one can easily Google and get thousands of solutions. With Out Systems the lack of people using it results in a lack on any real information when doing Google searches  


Omran Bhatti wrote:

Suraj Borade wrote:

Outsystems should have more videos for how to use Javascript in the applications. Master class which already exist is outdated for mobile apps.


That's the problem with OutSystems, the sheer lack of useful information ! Java ...NET issues one can easily Google and get thousands of solutions. With Out Systems the lack of people using it results in a lack on any real information when doing Google searches  


But I'm sure you've found the same as I have... that for every 1,000 solutions 990 of those solutions are wrong or unintentionally misleading and definitely contradictory... and you have to pile through them trying to gleam what you're looking for.

However, when you ask a question on this forum... you get solid answers.

I'm fairly new to OutSystems and when I went looking for Javascript implementations I did find them.  I'm very happy about how Javascript is implemented in Mobile... and equally sad about how it's implemented for Web - hoping they'll change that.


Davidk wrote:

Omran Bhatti wrote:

Suraj Borade wrote:

Outsystems should have more videos for how to use Javascript in the applications. Master class which already exist is outdated for mobile apps.


That's the problem with OutSystems, the sheer lack of useful information ! Java ...NET issues one can easily Google and get thousands of solutions. With Out Systems the lack of people using it results in a lack on any real information when doing Google searches  


But I'm sure you've found the same as I have... that for every 1,000 solutions 990 of those solutions are wrong or unintentionally misleading and definitely contradictory... and you have to pile through them trying to gleam what you're looking for.

However, when you ask a question on this forum... you get solid answers.

I'm fairly new to OutSystems and when I went looking for Javascript implementations I did find them.  I'm very happy about how Javascript is implemented in Mobile... and equally sad about how it's implemented for Web - hoping they'll change that.


No ... I have not found that, you need to specific about what you are looking for when  Googling in order to get the best solutions. 


On here the answers are limited and not very often solid tbh