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.
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 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
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
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 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 ,
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
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.
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.
This code works, it might not work in the following caseOnce this snip is run:$(document).ready(function() { $(".Classname").on("focus", function() { $(this).on("keydown", function(event) { if (event.keyCode === 38 || event.keyCode === 40) { event.preventDefault(); } }); });}); All your input will have disabled arrow keys, but, as soon as you refresh the inputs you need to re-run the script. Put it in the <script> tag on your page and refresh the script when ever you are refreshing the inputs.
I still think this is not the ideal solution and am looking for a better one. I will keep this thread posted.
Just adding an additional solution:
Add this Javascript to the screen
function disableArrowKeys(){
if (event.keyCode === 38 || event.keyCode === 40) {
event.preventDefault();
}
add the following in the extended properties of the input
This should do the job.