9

I have a Rails app that has a closed back-end. On certain pages, I want to auto-select a text input so I can use an external bluetooth scanner to scan a barcode without selecting it with a mouse/touchscreen every time. This works perfectly on non-mobile devices. However, on mobile devices (mostly tablets), I want the keyboard to popup (as the scanners are viewed as "keyboards" by the system). I know this is prevented by iOS, because it could be annoying. However, I want to know:

  1. Can I have the keyboard auto-appear on Android and/or Windows tablets?

  2. On iOS, can I change this default behavior so the keyboard DOES auto-appear? I have access to all the devices this behavior would be needed.

Edit: I know that I can use a click event to make the keyboard appear (that is how it appears now). However, I do not want to touch the tablet every time I want to scan.

Ryan K
  • 3,985
  • 4
  • 39
  • 42
  • Is it a web application? You need auto-appear on a page load, don't you? – shukshin.ivan Feb 08 '17 at 10:55
  • @shukshin.ivan It's a web application using Rails. While I need it for page load, I need it in general. I have some JavaScript that auto-selects the input field every second if it's not already selected. Now I need that same JavaScript to make the keyboard auto-appear. – Ryan K Feb 08 '17 at 12:32
  • I think it is not possible on every OS. Keyboard showing is connected to user's action - http://jsfiddle.net/Twisty/knoohfwt/2/ – shukshin.ivan Feb 08 '17 at 12:51

5 Answers5

4

There are some workarounds except using great prompt().

  1. Wrap the web application into Phonegap and do the following way.
  2. Keeping in mind that bluetooth scanner needs a first click to enable listening to keyboard events, you can slightly change js-code to perform first click manually (say, fullscreen textarea) and then deal with scanner. It can be a textarea that hides right after a first click and everything is done with javascript without textarea in view.
  3. Looks like Windows smartphones can help you, can't find any issue concerning a problem.

I've tested autofocus fiddle in Chrome56 with Windows 8.1, Windows10 and an old Windows Mobile 8.1 at Nokia Lumia. In first two cases it does listen to keyboard after focusing. The latter one doesn't.

Bonus. HTC One M8 emulator with Android 4.4 listens to keyboard without a click. Tested with browserstack service. What if there are some android examples without need to click?

Bonus2 - autodetect scanner library.

Community
  • 1
  • 1
shukshin.ivan
  • 11,075
  • 4
  • 53
  • 69
  • That would work, but I have two scan areas I go back and forth to. That would require a click event every single time I scan something, which is basically the problem I have now. – Ryan K Feb 13 '17 at 04:02
  • If you have two scan areas and need to scan them by specific order (A-B-A-B-A-B...), you can scan codes to one `textarea` and pass values to handlers via javascript. You can display order at screen. Big A - scan A, big B scan B and so on. – shukshin.ivan Feb 13 '17 at 08:04
  • The Bonus2 link was really good. I used something like that as a workaround (basically detecting the raw input and entering it myself). You also were the only one who actually gave me an answer on Windows/Android. – Ryan K Feb 15 '17 at 01:10
3

Based on thoses answers you have to try some workarounds

You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).

There are a couple of ways I know of to get around this:

  • prompt() opens the keyboard
  • If you trigger the .focus() from within a .click() event (e.g. from >opening your dialog), the keyboard shows up

In your case at the openning of your page ?

At least maybe this JS fiddle can help you or this one

Community
  • 1
  • 1
Seba99
  • 1,197
  • 14
  • 38
  • I am trying to remove the touching of the screen aspect, as it forces me to do it every time I want to scan, not just at page load. Do you know about Windows? – Ryan K Feb 13 '17 at 03:58
3

You can use JavaScript in built functions for event handling such as focus(), prompt() to initiate bar code scanning function. Also changing some of the usability would also be helpful in this case. For building hybrid apps try some reading on Cordova Keyboard Plugin at https://github.com/cjpearson/cordova-plugin-keyboard

Happy Coding.

Atul Jindal
  • 946
  • 8
  • 8
1

try below code. It might work

// div is some selected element
            var f = function(event) {
                $timeout(function() { // angular way, setTimeout is OK
                    input[0].focus();
                    event.preventDefault();
                })
            };
            var mobile = false;
            div.on('click', function(event) {
                if(mobile) return;
                f(event);
            });

            div.on('touchstart', function(event) {
                mobile = true;
                f(event);
            });

            div.on('touchend', function(event) {
                event.preventDefault();
                event.stopPropagation();
            });
Swanand
  • 507
  • 6
  • 15
-1

My best bet is using offsite input and focusing there. It will help you to control -

  1. the timing of keyboard appearance(setTimeOut)
  2. Check and reopen the keyboard

You will need to do something like this-

<input type="text" style="visibility: hidden; position: fixed; left: -200px" >

With jQuery-

$("#theOffViewBox").focus();

This will work equally on iOS/Android/Windows/Linux as being base JavaScript jugad.

Community
  • 1
  • 1
Vishal Kumar Sahu
  • 1,232
  • 3
  • 15
  • 27