0

Control the focus of a field

I have a text field that takes data from a scanner and runs a script when modified. I would like the focus to go back to that field automatically, ready for another scan. Is it possible?

4 replies

null
    • John_Halls
    • 1 mth ago
    • Reported - view

    I came up with a workaround for this. After much experimentation, I noticed that the focus is lost with an ENTER but will move to the next field with a TAB as long as there is a next field to go to. My goal was to be able to scan products into an ePOS system without needing to use the keyboard between each scan (mimicking what we would see at a supermarket checkout). I ended up changing the scanner to add a TAB after each scan, and to have a pair of scan fields so that each scan toggles the focus to the other field. Really pleased with the end result.

    My take from this? There is always a way...

    Regards John

      • szormpas
      • 1 mth ago
      • Reported - view

       Hi,

      I'd like to move the focus to a "Search" text field after pressing the "Clear" button. I was wondering if your method would work for my situation. How can I simulate a tab press programmatically?

      Best wishes

      Sotirios

      • John_Halls
      • 1 mth ago
      • Reported - view

       I couldn't find a way of moving the focus to a field and my ePOS still needs a mouse click after the end of a transaction to put the cursor back into a scan field.

      • szormpas
      • 1 mth ago
      • Reported - view

        Hi John, I've been trying to find a solution too, and so far I've figured out that:

      Ninox will only render the real input element after the user clicks into the text field.

      Before any user action, the DOM representation of the text field looks like this:

      <div class="component editor editor-string" style="width: 50%;">
        <label>Text</label>
        <div class="string-editor">
          <div class="nx-input" data-testid="text-container">
            <div class="nx-input__value nx-input--string nx-input--placeholder"
                 role="button" tabindex="-1">
              <aside class="RippleContainer-biTwDC"></aside>
            </div>
          </div>
        </div>
      </div>
      

      Once the user puts the cursor inside the text field, the DOM changes to:

      <div class="component editor editor-string" style="width: 50%;">
        <label>Text</label>
        <div class="string-editor" style="flex: 1 1 auto;">
          <div class="nx-input nx-input--editing" data-testid="text-container">
            <input
              class="nx-input__input"
              type="text"
              data-testid="text-input"
              value=""
            >
          </div>
        </div>
      </div>
      

      The issue is that the Ninox framework doesn't allow us to click the initial div element with the role="button" using scripting (e.g., using the click() method).

      Can anyone shed some light on this?

Content aside

  • Status Answered
  • 1 mth agoLast active
  • 4Replies
  • 74Views
  • 2 Following