Angular 2 - get barcode scanner data without using HTML input/textarea - javascript

I'm creating web application which uses barcode scaner (in my case Motorola TC55).
My goal is to scan product EAN without using HTML input/textarea. Why? Because I want to prevent pop up keyboard on mobile devices. This field should be usable on desktops too (without connected scanner - to input data from keyboard).
What I've tried:
Set readonly/disabled attribute on input - mobile keyboard is hidden, but I can't set focus on this input.
Create div with contenteditable directive - keyboard is visible.
And finally (the most sofisticated so far) - create div with onClick event. After click in div I'm starting listening to keypress and saving everything until Enter key is pressed. It works fine on desktop. On mobile keyboard is hidden but keypress event is triggered only on end of scanning (Enter key).
Any other sugestions?

Disclaimer: I work for Zebra Technologies
Because you're working on a Motorola (now Zebra Technologies) TC55, you have available different options.
The easiest is to use something like Zebra's Enterprise Browser, it requires a license, but it includes some additional APIs that allows to control the additional HW of the device. In particular you've available a Barcode API that allow you to take full control of the integrated barcode scanner.
If you prefer to use something that requires a bit more hand-holding, you can take a look at this blog post that explain how to bridge between DataWedge (the application that on the Zebra Android devices is sending the barcode data as characters) and the Chrome Android Browser using WebSockets.
If you have a support contract for your TC55 you can update your device to the latest security updates and fixes. You can find more information on Zebra's Support Website.

Related

jQuery - Allow Autoshow Keyboard on Mobile

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:
Can I have the keyboard auto-appear on Android and/or Windows tablets?
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.
There are some workarounds except using great prompt().
Wrap the web application into Phonegap and do the following way.
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.
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.
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
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.
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();
});
My best bet is using offsite input and focusing there. It will help you to control -
the timing of keyboard appearance(setTimeOut)
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.

Showing Android soft keyboard for an HTML field even when an input device is attached

There is an Android tablet with a barcode scanner connected via USB.
This tablet shows an intranet web site.
Because the Android OS detects an input device, it stops displaying the soft keyboard when focus goes into a field on the screen.
Most of the time this is fine, but there is a couple of fields for which the keyboard must be displayed.
Is there a way to trigger the soft keyboard with JavaScript or in some declarative way from an HTML page?
It is currently not an option to create a wrapper Android app that would display the web site in a WebView and trigger the keyboard via the javascript interface. This is because the WebView uses the stock Android browser, which does not support all features the web site has (the Android version is not too recent). So the tablet runs a separately installed Firefox (or Chrome, no preference).
Try using
onclick="javascript:document.getElementById('input_field_to_focus').focus();"
Refer the link:http://code.google.com/p/android/issues/detail?id=27438

How to auto-scroll to input field in Android when the soft keyboard overlaps them on showing?

I am developing a hybrid app using Worklight, and I am experiencing the following issue:
When the user clicks on an input field, the soft keyboard that pops up hides the input field when the latter is relatively low on the screen. The page is scrollable, so the user can scroll and see the field again, but the customer requirements define that the page will auto-scroll until the field is visible.
Please note that this happens only in the Android environment. In the iPhone and iPad environments the default behavior is the the desired one.
Based on my findings, the trick should be done via the android:windowSoftInputMode attribute in the Android manifest file. However, all my efforts there failed to achieve the auto-scroll.
If there is a solution that is Worklight specific, I would prefer to use it, rather than intervening in the Android native code.
This isn't really about Worklight at all... but about web apps in general in Android, it seems (from a quick search in Stack Overflow).
Here are some suggested solutions, that differ from yours:
Textbox hidden below keyboard in Android webview
html textfield in WebView in an Android application is hidden by the soft keyboard
Keyboard hiding EditText when android:windowTranslucentStatus=true
You could possibly also use iScroll.js (lite edition) - or implement this yourself by catching the focus event - to scroll a specific amount of pixels upwards.

scan barcode in a web application

I'm building a web application (C#) for a customer.
Now I'm trying to add a page for mobile. I want that the customer will be able to scan a barcode (1D barcode or 2D barcode) and the code will be written in a text field (<input>) on the screen for further operations. It must work on android or iphone, and better - on both.
I tried to use JS codes which I can take a picture with the camera in the mobile device and the script reads the barcode in the picture - but I didn't find something good enough.
this one didn't work with large images from the camera, and this one couldn't read some of my barcodes and also couldn't read large images.
I tried to find a way that the customer will click on a button to open a barcode-scanner-application on the device (I have an android mobile device) - and the barcode will be written on an input on the screen, but I can't find if it's possible and how to do it.
I don't want to use phonegap - I need it as a web application, not a native app.

Listen to keypress in HTML/JavaScript on iOS/Safari with Bluetooth Scanner/Keyboard without having to focus a field

I have the following setup:
iPad with Safari browser running a webb-application.
Bluetooth barcode-scanner connected/paired with the iPad.
My web-application listens to keypress events globally which gives me the possibility to trigger scan functions without having the user to focus a textfield in the webb-application.
The above works fine when running the application on a desktop with an USB-scanner.
My problem is that the application doesn't trigger keydown(press/up) events until a textfield is focused on the iPad when the bluetooth-scanner is connected.
Is it possible to achieve?
A related question from a while ago:
How can I add a Javascript listener to capture input from bluetooth barcode scanner to iPad?
Thanks /E
I believe that with mobile Safari (and most other iOS mobile browsers), keypresses are only detectable by the web app when a form input is infocus. Your device (without an external keyboard) can't take keypress input without a form input being selected simply because the keyboard would not be up.

Categories

Resources