On Change action - waiting for the enter key

On Change action - waiting for the enter key

  

in an input box that uses the ON CHANGE... how can we prevent that when someone type in the input box, it waits for the enter key to run the rest of the ON CHANGE action?


For example, someone writes 46546 in the input... but to run the rest of the on change action it needs to wait the user press the enter key..

Jorge Almeida wrote:

in an input box that uses the ON CHANGE... how can we prevent that when someone type in the input box, it waits for the enter key to run the rest of the ON CHANGE action?


For example, someone writes 46546 in the input... but to run the rest of the on change action it needs to wait the user press the enter key..

Hi Jorge,


I) You could run some JavaScript/JQuery to listen for the pressing of the Enter key and if it listens to it can run the rest of the action, or calls a separate action containing your OnChangeLogic

ii) Or you could have a default button which calls your on Change Logic and set the default of that button to Yes. This would only work if there isn't another default button.

I hope this helps!


Say if not, and hopefully someone may have a better idea!


Edward


there is no button... only an input box. the second option works (it is easier to implement). but it is not what is desired. No button is a requirement.


i need more details for the first approach. thanks

This is code to block the Enter key.

 there must be something that allows you to click a hidden button, or you can place this in your onchange


Essentially add RunJavascript from the HTTP Handler Extension (It might be in the Forge) and run JavaScript like the below. You need to listen for keycode 13. Calling the onchange/running the rest of the onchange will be the challenge


"window.addEventListener('keydown', function (event) {

    // if the keyCode is 13 ( enter key was pressed )
    if (event.keyCode === 13) {

        // prevents default behaviour
        event.preventDefault();

        return false;
    }

});"

Hello Jorge,

The OnChange never waits for the enter to happen.
The OnChange is triggered after the user stops typing (it wait a small amount of type before triggering the event). 

The "enter" key will do nothing, or, case you have a "default" button/link in the page, it will be "clicked".

So, it is very strange if the OnChange is happening ONLY after the Enter is pressed.

In this case, can you reproduce this behavior in a very basic module and share it? 

Cheers.

Edward I have used the Run Javascript in the on change action and it does not work. Eduardo is right. But the problem remains: there must be no button and only the input box waiting to press the Enter key. there must be a way.


Sorry Jorge.

JavaScript is hard in Outsystems, but I am glad Eduardo has replied as he has helped me out a lot in the past.

I'll have a think and keep you posted.


Edward

Jorge, 

The way you put your question, in the beginning, it seems that you had a problem with the Enter Key, that you was having to wait the Enter to be pressed to the OnChange to be triggered.

But by your last comment, what you want is that the "OnChange" to happen only when the user press the Enter Key, right?

Can I suggest something different?

Put a hidden link in your code that calls the action you want. Give it a name.
Than, use the code of Edward with a small change:

"window.addEventListener('keydown', function (event) {

    // if the keyCode is 13 ( enter key was pressed )
    if (event.keyCode === 13) {

        // prevents default behaviour
        event.preventDefault();

        $('#" + Link.Id + "').click();

        return false;
    }

});"

And you don't need to use the OnChange.

Cheers.

Eduardo Jauch wrote:

Jorge, 

The way you put your question, in the beginning, it seems that you had a problem with the Enter Key, that you was having to wait the Enter to be pressed to the OnChange to be triggered.

But by your last comment, what you want is that the "OnChange" to happen only when the user press the Enter Key, right?

Can I suggest something different?

Put a hidden link in your code that calls the action you want. Give it a name.
Than, use the code of Edward with a small change:

"window.addEventListener('keydown', function (event) {

    // if the keyCode is 13 ( enter key was pressed )
    if (event.keyCode === 13) {

        // prevents default behaviour
        event.preventDefault();

        $('#" + Link.Id + "').click();

        return false;
    }

});"

And you don't need to use the OnChange.

Cheers.


Hi Eduardo. Do you need the event.preventDefault(); This code stops all use of that key. That;s what it did when I used it?

YES, you are right Eduardo "But by your last comment, what you want is that the "OnChange" to happen only when the user press the Enter Key, right?". You got it. 

I have applied your suggestion, but there must be something wrong in the js code?... I have a hidden link , gave it a name, substitute link for the name of the link in the js code. 

Edward S wrote:

Eduardo Jauch wrote:

Jorge, 

The way you put your question, in the beginning, it seems that you had a problem with the Enter Key, that you was having to wait the Enter to be pressed to the OnChange to be triggered.

But by your last comment, what you want is that the "OnChange" to happen only when the user press the Enter Key, right?

Can I suggest something different?

Put a hidden link in your code that calls the action you want. Give it a name.
Than, use the code of Edward with a small change:

"window.addEventListener('keydown', function (event) {

    // if the keyCode is 13 ( enter key was pressed )
    if (event.keyCode === 13) {

        // prevents default behaviour
        event.preventDefault();

        $('#" + Link.Id + "').click();

        return false;
    }

});"

And you don't need to use the OnChange.

Cheers.


Hi Eduardo. Do you need the event.preventDefault(); This code stops all use of that key. That;s what it did when I used it?

Enter has special meaning in OutSystems (mainly if you have a Default Button/Link).
I think in this case, as there is no button in the screen, it is not critical, but in any case, I let it there, as this will prevent the event that is automatically bind to the input by the platform.

This way, when an Enter key is pressed in the input, the default event is "canceled/prevented" and the link is "clicked", calling the action.

Jorge Almeida wrote:

YES, you are right Eduardo "But by your last comment, what you want is that the "OnChange" to happen only when the user press the Enter Key, right?". You got it. 

I have applied your suggestion, but there must be something wrong in the js code?... I have a hidden link , gave it a name, substitute link for the name of the link in the js code. 

Have you put the Javascript code in an unescaped expression AFTER the link?
If not, at the moment this javascript is executed, the link do not exists yet and no bound is made, making the code do not work.


EDIT:

I made a small test and it works as I expect.
https://eduardojauch.outsystemscloud.com/EnterKeyTest/Home.aspx?_ts=636528351110919314


Yep. I have used an expression (put it as no in the Escaped content), in the value I paste the js code and only swap the Link.Id for the name I gave to the link. Well, I forgot to tell a very important detail: there is a default button... which means when we click in the enter it will call the action of that button.. not the one action in the link. is there a way to circumvent this default button without removing it and accept the action we want to run? it must listen what is happening in the input box we want to implement the action (writing a number and then only executing the action after user press enter key)... ignoring the rest of the buttons/other input boxes. 

Solution

Jorge, 

Is not easey to help you if you keep "forgetting very important details"... ;)

Before continuing (because I don't know if is even possible to do what you want with a default button in the screen with a lot of effort.

This is a VERY unusual way of thinking a screen.

You have a form with a default button that must be executed on ENTER pressed, with the exception of a SINGLE input that the Enter will not do that...

The user expects to the ENTER to press the default button.

Do you see the problem here?
There is no other way to accomplish what you want to do, that do not involves changing the behaviour of the Enter pressed for a single input?

Anyway, a workaround is to use a Text Area.
Put your input with 2 lines.
Than, change your javascript for something like this:

"<script>
$('#" + myinput.Id + "').attr('rows', 1);
document.querySelector('#" + myinput.Id + "').addEventListener('keydown', function (event) {

    // if the keyCode is 13 ( enter key was pressed )
    if (event.keyCode === 13) {

        // prevents default behaviour
        event.preventDefault();
        $('#" + Link.Id + "').click();
        return false;
    }

}, false);</script>"

This will work as expected, even with a default button.

Cheers.

Solution

There is a search box with two input boxes, and two buttons, one for search (default) and another to clean the input boxes. 

Below in the table records (check below) anyone could add new information in one column. It is an input box that when someone click on Enter key in that box it should trigger one action that will save the number to the database and display it in the table records.  When someone type 5467... and press enter, the number should disappear from the input box , but it will be added to the next column. the input box only can have one line. 

Jorge, 

The solution I gave you works exactly as you want it.

And you can test it here (I'm not using a list, but you can adapt it easily to a list): https://eduardojauch.outsystemscloud.com/EnterKeyTest/Home.aspx?_ts=636528382830928712

TO erase the content of the input and keep everything working, the javascript must be refreshed at the same time than the input.

If you can't put it to work, I can't help you anymore, as I gave to you the solution.
Hope you can make it work.

Cheers.

is it necessary that the input box must have two lines? why? 

yep, your module showed it perfectly. thanks.

Jorge Almeida wrote:

is it necessary that the input box must have two lines? why? 

Only if you want it to work ;)

This is a workaround. Setting the input to have 2 lines, the input will be placed in the HTML file as a Text Area instead of an input.

Text Areas do not fire the event that click the default buttons.

The JavaScript is to change the number of lines back to 1 and capture the keys pressed by the user in this input, preventing it from adding a new line and calling the action instead.

Other solutions will be much more complex as you will be required to prevent the event from trigger on enter, when entering the input, and restoring it on leaving, or create even more complex code.

Cheers