Hi Renny,

Below mentioned solution covers both the possible use-cases.

- There are multiple ways following which we can define/use the JavaScript in a screen. As per my understanding w.r.t the mentioned use-case, I would suggest you to try with the below mentioned solution..

- Define an Expression widget to the Screen's Footer placeholder section as shown below

- Referring from the below mentioned Code snippet - Define/use anyone of the JavaScript code snippet within the introduced Expression widget as per the requirement.

Case 1) Is it that you are trying to disable/restrict the keyboard input for a specific Input control?

"<script>
    eventTarget = document.querySelector('#" + CommentInpt.Id + "');

    eventTarget.addEventListener('keydown', event => {
        event.preventDefault();
    });
</script>"

Case 2) Is it that you want to disable the keyboard input for the entire screen?

"<script>
  document.onkeydown = function (e) {
        return false;
    }
</script>"

Hope this helps you!

Kind regards,

Benjith Sam

Hi Benjith,

Thank you for the response.

I followed your instructions using case 1 and was able to prevent the keyboard entry.

But somehow it also restrict the barcode scanner entry. I think it also detects the scanner entry as keyboard.

Please let me know if you have any ideas on how to to make this work.

Thanks,

Renny 

Hi Renny ,

You can use below JavaScript on oninitialize event :

document.onkeydown = function (e) 

{  

return false;

 }

URL : https://rahuljain877.outsystemscloud.com/Example/Screen2?_ts=637424126619686699

Hope this helps you! 

Kind regards,

---RJ---

,

Hi Renny,

Sorry! I don't have barcode scanner with me to trail/test this implementation, neither I do have any past experience working on such use-case. 

I did a quick google search which landed me to this post: 

https://stackoverflow.com/questions/38958272/disable-keyboard-with-html-input-and-allow-scanners#answer-38958481

It clearly states that...

"So first you need to understand that barcode scanners pretend to be keyboards. So they will trigger JS keystroke events just like real keyboards."

You can try with the suggested solution :)

Hope this helps you!

Kind regards,

Benjith Sam

Hi Rahul and Benjith,

I actually solved my problem.

While browsing some search results, i also encountered the link that Benjith mentioned.

Someone named Joel on that thread shared his code:

let inputStart, inputStop;

$("#scanInput")[0].onpaste = e => e.preventDefault();
// handle a key value being entered by either keyboard or scanner
var lastInput

let checkValidity = () => {
    if ($("#scanInput").val().length < 10) {
      $("#scanInput").val('')
  } else {
    $("body").append($('<div style="background:green;padding: 5px 12px;margin-bottom:10px;" id="msg">ok</div>'))
  }
  timeout = false
}

let timeout = false
$("#scanInput").keypress(function (e) {
  if (performance.now() - lastInput > 1000) {
    $("#scanInput").val('')
  }
    lastInput = performance.now();
    if (!timeout) {
    timeout = setTimeout(checkValidity, 200)
  }
});

I tried that code and it works magically... =)

I did some adjustments on the code as the initial valid length it accepted is for 10 characters and mine have the shortest is like 2-3 characters only. And right now I was able to apply it for 2 input boxes on my app.

Regards,

Ren