Hide keypad in angular 6 - javascript

I have an input box which i have camouflaged in the background. Basically, i am developing an app for Honeywell CT50 device, which uses laser scanning for scanning barcodes and qrcodes. Since, laser scanner requires an input box to contain the value of barcode, once scanned, being the default behavior of focused input box, keypad appears on the mobile screen. I don't want the keypad to appear as the value is being read by scanner. I am developing the application using angular 6. Due to the keypad popping up from bottom of the screen, i am also facing some issues regarding vertical scrolls.
I have tried hiding the keyboard using :
<input #barcodeInput onfocus='blur()'>
The above doesn't work.
Then i tried the following:
#ViewChild('barcodeInput') barcodeInput: ElementRef;
this.barcodeInput.nativeElement.dismissSoftInput();
The above doesn't work as well.
I am stuck and can't proceed. I have to hide the keypad when i load a particular component, keep focus on the hidden input box so that laser scanner works without any click and then clear the value of hidden text box once the value is processed.
Please suggest me a solution!

I know the question is so old, but may be there are still some needs.
In my case, I have an app:
AppComponent -> ComponentWithInput
and with the html:
<div class="app-container" (click)="onClick()">
<component-with-input></component-with-input>
</div>
And everything I do is adding (click)="onClick()"
You can leave the method empty as I did:
onClick() {
// EMPTY
}
This works for me.

Related

Search input with virtual js keyboard doesn't work

I am still a javascript beginner and tried to integrate the virtual keyboard into my project. This already worked without problems, unfortunately I have the problem as soon as I use an input via this keyboard in my input field type Search that the search does not work. If I enter the input directly with my keyboard the search works fine. What can be the reason for this? Also when I use the virtual keyboard to enter an input the -webkit-search-cancel-button doesn't work either or is only displayed when I move the mouse over this area.
<input type="search" placeholder="Searchbar">
Code example: https://codepen.io/siad/pen/jOYLJVW
Unfortunately, I have not yet been able to find the error for this.

Populating Quick Type Bar Options on IOS Devices

I have an input type email.
<form>
E-mail:
<input type="email" name="email">
</form>
As soon as the user start typing, I would like to give them the option of most popular emails. Ex. #gmail.com ...
See the image below for details.
How would one go about and implement something like this?
Is there any plug-in or framework that help me achieve this kind of task?
Will HTML/CSS/JS have the ability to do that or only swift2 can ?
QuickType is part of the built-in iOS keyboard, and here is no way to access and/or modify it with JavaScript from a simple website. Unfortunately, you can't even detect the keyboard's height, and position some fake QuickType-like buttons over the keyboard, because the keyboard animates up from the bottom, over the current application without resizing or moving anything.
I'm afraid your only option is to add these as small buttons under the input, or maybe you can create something similar to the iOS copy/paste menu, that becomes visible, when the user starts typing in the input, and append the email endings on a click/touch.
I agree with #frzsombor, but I can think of a different workaround. It would take a lot of code though, so it might not be worth it. Anyway, what you could do is periodically take a screenshot and check for one of the colors on the keyboard in a certain position, maybe #ACB3BB (the return button color). If it is there, you could display another Quick Type Bar above the built-in one. The only problem would be if an update to iOS changes what the bar looks like, but you could always update your website. Another possible way to detect the keyboard is here. I think you need jQuery for that, though...

how to avoid the keyboard obstructing buttons

Hi all I have a window with two text fields and two buttons.When I'm on the second text field, the keyboard is in the way of the buttons. And thus, there is no way to press the buttons. I need to turn the device sideways and a 'done button' appears in my text field which, if clicked, will remove the keyboard. But in the future, I will be locking my app to portrait so I'm just wondering how to solve this issue. Is there a specific keyboard I can call which will have a button to remove the keyboard or anything like that? I'm working with titanium
As suggested, in comments above.
By placing the View inside a ScrollView will allow you to achieve this result. Then when the keyboard is shown for that view you can have the textfield scroll up so it is not covered by the keyboard. Follow this example shown here:
How to make a UITextField move up when keyboard is present?
If you don't want to use a scroll view, or want more control over the 'avoiding', use IHKeyboardAvoiding https://github.com/IdleHandsApps/IHKeyboardAvoiding
(its mine)

I want Android soft keyboard to have a "Done" button at the right moment WITHOUT JAVA

I'm aware that questions have been asked and answered about the Android soft keyboard and which buttons it shows by default, and in what circumstances, and how to modify them.
However, all the answers involve changing the Java code. Since I am writing a cross-platform app using Phonegap and jQueryMobile, I'd like to stay away from learning Java.
My problem is this:
I have a form with (in this order, in abbreviated html):
<form action='javascript:processSubmit()'>
<select id='expenseType'/>
<input type='text' id='expenseAmount'/>
<select id='expenseDate'/>
<button type='submit'/>
</form>
What currently happens is that the soft keyboard will appear once I press the text input field. So far so good. The button in the bottom right corner of the soft keyboard says 'Next'. But pressing it does not shift the focus to the next form field. And when the user has clicked on the second select and picked a value, the keyboard button does not change to 'Done'.
Is there not a way to give the fields some special html attribute to make the magic happen?
Or a Javascript way to change the softkeyboard?
AFAIK, there is no way from JavaScript or HTML to affect the behavior of the Android soft keyboard.
I know that is a very old question, but with this plugin https://github.com/driftyco/ionic-plugin-keyboard you can change this behaviour with the Keyboard.hideKeyboardAccessoryBar method

Read-only input in Android Webkit not working

I have a text input field in my web page that I am using to collect a date (via the jQuery Tools .dateinput). The user does not need to be able to type into the field. A dialog box appears when the field is clicked on. This is a problem on my Motorola Droid, because I don't want the soft-keyboard to appear when the field is clicked.
I have tried input.blur() on focus and also setting the field to disabled and readonly. Setting the field to disabled has undesired side effects. Setting the field to readonly works in everything but the Android browser. The browser seems to recognized the "readonly" attribute (or readOnly via javascript), BUT the field does not actually become readonly. When you click it, the soft keyboard still appears and allows you to change the field.
I suppose that this is a bug in the Android browser. Can anyone come up with a clever alternative?
I used a workaround - since I didn't need to actually edit in the input field (like you, I was popping a date picker), I changed to a span with similar styling. The code is kind of trivial once you have the trick, and it's really app specific so I don't have any really for you to see.

Categories

Resources