How to simulate an autofocus

Question

I created a webview (Android) for our site. I put the input in autofocus:

<input name="barcode" 
        type="search"
        placeholder="Scan Barcode"
        class="form-control"
        autocomplete="off"
        autofocus
        required>

When the page is loaded the input is selected but the keyboard of Android does not open => Perfect

But when I focus on this input the android keyboard opens and I do not want it to open because this input is only used to scan barcodes

So I would like to "simulate" an autofocus when closing a modal (for example) rather than a simple focus, how to do?

$('.modal').on('hidden.bs.modal', function (e) {
  $("input[name='barcode']").focus();
});

EDIT : More details :

We use these scannettes to access our intranet site :

https://www.jmprime.co.uk/product_info.php/android-barcode-scanner-with-gun-grip-rugged-handheld-ip67-device-with-1d-barcode-reader-p-238

On the page in question there is only one input, the goal is to enter the input without opening the android keyboard in order to scan a bar code (they are then sent to the database)

You try .click after focus? Like `$("input[name='barcode']").focus().click()` — SG52, Jun 06 '18 at 08:23
@Ivar but if this is read-only, I can not send to give during a scan? — Rocstar, Jun 06 '18 at 08:44
You do not want the user to enter any data into the input? Is something else going to automatically populate the input? — Alex, Jun 06 '18 at 08:46
@Rocstar Scanners usually auto-type it into the box. You could try to capture the key-down event and then add it to the box itself with JavaScript. That way it can still be read-only. — Ivar, Jun 06 '18 at 08:46
Wait, is the user taking an image of a barcode, and the barcode is auto-typed into the input? — Alex, Jun 06 '18 at 08:49
try my last fiddle. It should work. It works on my Galaxy S8, the keyboard doesn't show up. You just need to see if the barcode gets scanned correctly — Sampgun, Jun 06 '18 at 10:05
@Sampgun It works ! Thank you very much ! But I can not apply a style to my input, for example rounded edges — Rocstar, Jun 06 '18 at 11:41
You add a span inside the label...It will automatically be overwritten...You just have to restore it if $barcode.val() is empty! — Sampgun, Jun 06 '18 at 12:51
I updated the fiddle to handle the placeholder https://jsfiddle.net/ubdnvsk0/26/ — Sampgun, Jun 06 '18 at 12:55

Sampgun · Accepted Answer · 2018-06-06T12:51:54.823

2

As of This answer, readonly seems to work. I found it difficult to work directly on the input, so I would still use the trick of the fake input. With timeout set at 1ms it works like charm. (updated fiddle below)

<input id="barcode" name="barcode" type="hidden" placeholder="Scan Barcode" required>

<label for="barcode" class="your-cool-class-to-make-this-look-like-an-input" />

With the for attribute, when clicked, it will focus the related input.

https://jsfiddle.net/ubdnvsk0/26/

edited Jun 06 '18 at 12:51

answered Jun 06 '18 at 08:31

Sampgun

2,822
1
21
38

1

I look forward to your example – Rocstar Jun 06 '18 at 08:43
alas it does not work .. when i click on the input with the id test or on the label, the android keyboard opens – Rocstar Jun 06 '18 at 09:10

Alex · Answer 2 · 2018-06-06T10:28:54.767

Try this:

I used Bootstrap 4 for modaland jQuery.

I forgot to why .focus() sometimes doesn't execute but I remember by putting it into setTimeout() with a time of 0, it does the trick.

Just in case you get confused with the code: () => {} is similar to function() {}, it's an anonymous function / callback

Arrow functions are a more concise way to write function, introduced in ES6.

Arrow functions are anonymous functions, which means you cannot name it. Arrow functions do not bind to this, they don't create their own this, thus the enclosing this is being used.

Reading Material: 'Arrow Functions - developer.mozilla.org'

$(document).ready(() => {
  $('#myModal').on('hidden.bs.modal', () => {

    setTimeout(() => {
      $("#barcode").focus();
    }, 0);
  })
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">

  <input id="barcode" name="barcode" type="search" placeholder="Scan Barcode" class="form-control" autocomplete="off" autofocus required readonly><br>

  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

</div>

Yeah it's incredible, but I just thought of that and tried in my fiddle. It seems to work. — Sampgun, Jun 06 '18 at 09:48
Actually I didn't think about that. I wanted to catch all focuses. I used a timeout to add and remove a readonly attribute. But I catch the "focus" event. Because with your code if the user taps the input, the keyboard opens. — Sampgun, Jun 06 '18 at 10:07
Just add `readonly` parameter into your input. Still focuses. I edited my code accordingly. — Alex, Jun 06 '18 at 10:10
Saying that *"() => {} is the same as function() {}"* is quite inaccurate. jQuery is almost always better used (for consistency reasons, and the strong `this` binding) with `function` — Roko C. Buljan, Jun 06 '18 at 10:21

How to simulate an autofocus

2 Answers2