3796
Views
21
Comments
Solved
On Change action - waiting for the enter key
Question

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

mvp_badge
MVP
Rank: #5
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.

Rank: #2060

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


Rank: #441

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

Rank: #2060

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

});"

mvp_badge
MVP
Rank: #5

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.

Rank: #441

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.


Rank: #2060

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

mvp_badge
MVP
Rank: #5

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.

Rank: #441

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. 

Rank: #441

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. 

mvp_badge
MVP
Rank: #5
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.

mvp_badge
MVP
Rank: #5

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.

Rank: #441

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. 

Rank: #441

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

yep, your module showed it perfectly. thanks.

mvp_badge
MVP
Rank: #91

Hi Eric,

Please refer the attached .oml file, I have replicated the same implementation suggested by Eduardo in the solution post.

See this sample app

Hope this helps you!


Regards,

Benjith Sam

SampleAppEnterKey.oml