Prevent keyboard arrow key up and down using javascript

Hello,

Anyone can help me for the java-script code to prevent keyboard arrow key up and down navigation for the input widget. Whose type is number in out-systems.


Below is the example I tried in fiddle and it works fine here. But not in outsystems.

http://jsfiddle.net/59Lgwtbq/


Thanks In advance. Looking forward for the solution.

Solution

Hi Rohini,

You are using web app or mobile app.

in web app-

you can simply use this code


$(document).ready(function() {
    $(".Classname").on("focus", function() {
        $(this).on("keydown", function(event) {
            if (event.keyCode === 38 || event.keyCode === 40) {
                event.preventDefault();
            }
        });
    });

});

use class name in palce of "input[type=number]". and its working and put this logic on page javascript section


Thanks

Rahul Sahu

Solution

Hi Rohini,

I found your javascript worked, but the arrow keys were still displayed.

You could try removing the arrow keys with CSS

/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}

https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

The mouse wheel will also change numbers, so you might want to handle that too.

https://www.thatstevensguy.com/programming/disable-arrows-on-number-inputs/

Also be sure to check on multiple browsers.

I hope this helps!

Kind regards,

Stuart


Hello Rahul,

Yes I m using the Web App.

I have tried it worked for first time but when the focus is out. And If I try again it allow the keyboard up and down arrow keys.

Solution din't work.


Thanks,

Rohini

Hi Rohini,

You are using web app or mobile app.

in web app-

you can simply use this code


$(document).ready(function() {
    $(".Classname").on("focus", function() {
        $(this).on("keydown", function(event) {
            if (event.keyCode === 38 || event.keyCode === 40) {
                event.preventDefault();
            }
        });
    });

});

use class name in palce of "input[type=number]". and its working and put this logic on page javascript section


Thanks

Rahul Sahu



Hello Stuart,

I have already used the below css to hide the arrow  which are visible on focus of input widget.

My issue to prevent the keyboard key up and down arrow. When the input widget  type is number.

And the java script code I have added in fiddle it is not working on page of java-script property in outsystems

Thanks ,

Rohini

Hi Rohini,

I found your javascript worked, but the arrow keys were still displayed.

You could try removing the arrow keys with CSS

/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}

https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

The mouse wheel will also change numbers, so you might want to handle that too.

https://www.thatstevensguy.com/programming/disable-arrows-on-number-inputs/

Also be sure to check on multiple browsers.

I hope this helps!

Kind regards,

Stuart



Hi Rohini,

I have tried this code and working .

may it is browser specific problem which browser you are using. its working on Chrome.

https://rahul-sahu.outsystemscloud.com/BPT_Test/test.aspx


Thanks 

Rahul Sahu

Hi Rohini,

To help you further, would it be possible to upload your module, or an example module that has the same issue?

Without further information it is difficult to determine what the problem could be, as we have been able to make it work.

I am unsure what you mean by " but when the focus is out."?  Could you clarify this please?

Also, please provide any further information that might be relevant. For example, let us know if there are any other solutions you have tried which have not worked, so the community can help identify the cause of the problem.

Thanks,

Stuart

Hello Rahul,

I m using chrome browser.

But my project is having different layers. In core module I have designed few web-block. 

Those web-block I m using in the web end-user module. 

Don't know why the code is not working.

The link you provide test.aspx asking me the login details.

Thanks,

Rohini

Hi Rohini,

I have tried this code and working .

may it is browser specific problem which browser you are using. its working on Chrome.

https://rahul-sahu.outsystemscloud.com/BPT_Test/test.aspx


Thanks 

Rahul Sahu



Hello Rahul,

The code is working in another sample application.

But the project where I m trying this code it's not working. May be another javascript code is overriding the execution. As in our application we have the requirement to save the change of form on ever focus out of the input widget we wrote javascript code save the form details.

Thanks,
Rohini


Hello Rahul,

Yes I m using the Web App.

I have tried it worked for first time but when the focus is out. And If I try again it allow the keyboard up and down arrow keys.

Solution din't work.


Thanks,

Rohini

Hi Rohini,

You are using web app or mobile app.

in web app-

you can simply use this code


$(document).ready(function() {
    $(".Classname").on("focus", function() {
        $(this).on("keydown", function(event) {
            if (event.keyCode === 38 || event.keyCode === 40) {
                event.preventDefault();
            }
        });
    });

});

use class name in palce of "input[type=number]". and its working and put this logic on page javascript section


Thanks

Rahul Sahu