QR Scanner

0
Im working on one webapp where we are allowing user to scan a QR code of some products. On the page I have kept one input text box always on focus and active so when user scans particular QR code it should capture the related string in the input box and then I have added a logic for input box’s on change event to proceed further.   This is working fine. But now customer doesn’t want that input text box to be visible at all on the web page.    I need some guidance here how can I hide the input box but it should not disturb the implementation explained above.   I tried giving css to input box as visibiliy: hidden; It hides the input box but then scanner does not work.     Thanks, In Advance!
asked
1 answers
2

Hi,

Hiding the input box using visibility: hidden; will indeed make the input box invisible, but it will still be present in the DOM, and interactions with it might not work as expected. In your case, you want to keep the QR code scanning functionality intact while making the input box invisible. To achieve this, you can use CSS to position the input box off the visible screen area without affecting its functionality. 

Position Off-Screen Approach:

.off-screen 
{ 
position: absolute; 
left: -9999px; 
}
  1. Add a class to the input box (e.g., off-screen):

  2. Apply this class to the input box element using Mendix's built-in class options or by adding a custom class in your Mendix project.

  3. The input box will now be positioned far off to the left of the visible screen area, making it effectively invisible to users.

  4. Keep your logic for capturing QR code input and handling the onChange event intact.

answered