Show android keyboard from javascript - javascript

I want to be able to show keyboard on mobile browser (e.g. Android) after navigating to the page.
I have already seen some workarounds:
Show virtual keyboard on mobile phones in javascript
Can I trigger Android soft keyboard to open via javascript ( without phonegap )?
Showing Android's soft keyboard when a field is .focus()'d using javascript
But all of these examples work only if user tap somewhere. It allows to trigger focus() from within the click(). Does someone know if there any way to do the same thing but without user clicking?
I've tried to trigger click programmatically but it also not working. http://jsfiddle.net/alex_myronov/e5JcP/10/

My current answer to this is no, can't be done. The script that calls focus() click() on an input needs to be running with user context, ie. triggered by a user interaction. After fairly dedicated fiddling, I've found no way round this.

I managed to successfully open the virtual keyboard by just calling focus() method of the input.
It works in my app both on android 2.3 and 4.1.
I think the trick is that you have to wait untill the page is completly rendered before you call focus().
My app is using jquery mobile and I call focus() when the pageshow event is triggered:
$("#myPage").on("pageshow", function( event ) {
$("#myPage").find('input:first').focus();
} );
Or maybe it's working because I'm in a phonegap app?

Related

Prevent soft keyboard closing on text input blur

I am building a Web chat application (PWA).
I have a chat input, which I would like to keep focus on even when the "send" button is clicked. So I want the keyboard to stay open even when a chat is sent, either by pressing a "send" button, or by clicking on the "send" in the mobile's keyboard itself. This is the behavior you get in messaging apps like Whatsapp, iMessage, etc.
Even though it works on Android as expected, but I can't make it work on iOS Safari / Chrome.
What I have tried so far is as follows:
Bind touchstart / mousedown event, call preventDefault and stopPropagation.
Additionally, I am also doing "preventDefault" on the click event.
How can I achieve this on iOS Safari with vanilla javascript + HTML?

How can I get a WKWebView to show the keyboard on iOS?

My iOS app uses a WKWebView with contenteditable = true on a specific div. I'd like to have code to make the keyboard show up for the web view, so the user can just start typing. Things I've tried that have had no effect:
Telling the web view to becomeFirstResponder (a long shot, because the web view wouldn't know what div to use).
Injecting JS to tell the div to focus(). (This works in other browsers, but sadly not in WKWebView)
Simulating touch events in JS via TouchEvent and dispatchEvent() in the hope of making it seem that the user had tapped on the div.
In the third case I also used addEventListener() to observe the simulated touches and compare them to real touch events from tapping the screen. It looks like the key difference is that the event's isTrusted value is false for the simulated touches.
I get that it's a potential security issue to let apps simulate touch events, but I didn't have any other ideas. I'm trying to get the keyboard to appear, what the user types is up to them and not something I want to mess with. Basically I want the same thing as calling becomeFirstResponder() on a UITextView.
This is very similar to a WebKit issue 142757 but I haven't figured out how to use the suggested workaround linked from there.
Clarification: I can set up and use an editable web view, but the keyboard doesn't appear until I tap on the web view. I'm trying to make the keyboard appear automatically, without requiring a tap to initiate editing.
I tried this in an iPad playground, and it works without any action on my part. It’s possible there is another view that is capturing touches, or “contenteditable” is misspelled, or something else?

How to disable the Android keyboard from taking the control over input fields in webview?

I have been working on this specific requirement for more than 2 months now. But I haven't found a solution yet to disable the native keyboard when an input field is focused in a webview. I am building an app which has a built in keypad(essentially a view) and I want this to be displayed instead of the native keyboard.
What I've tried so far:
Add javascript eventListener for click events to display my keypad
using JavscriptInterface.(Works)
Set the webview focusable:false and
its parent's descendantFocusability to blocksDescendants (This works
but doesn't display the cursor on the input field)
Hiding the native
keyboard on resize event of javascript using loadUrl method.(Works
but the native keyboard is displayed momentarily before hiding the
keyboard)
Listening to the OnGlobalLayoutChange event to check if
the keyboard has been added. (Works but the result is same as
in the case above with a little improve in performance)
Force stop the IME service. (Works but the app has to be a system
app to force stop packages and the keyboard service has to be started
whenever the app goes to background.
Is there a way in which I can make this work?
You should set the windowSoftInputMode to stateAlwaysHidden for the Activity containing the web view. This should keep the onscreen keyboard hidden for the entirety of that Activity.

Show keyboard web application

I've a web application, then I need to work on mobile devices, mainly in Android.
The issue is that after some processing, the focus change to a text input then I need that when it happens automatically the virtual keyboard appear without the user need to tap over the input.
How can I do that?
The focus() and click() prevents that virtual keyboard appear to avoid annoying behavior. The only way to do that is to call the focus() or click() inside a user-evento context for example inside a click method callback.

Hiding ios keyboard in Cordova. Is it possible?

I am using cordova 3.4.0 and I would like to hide the keyboard once the ajax call did the job on search. I would like to avoid users to press "done" to hide de keyboard and see the result.
When you execute the ajax call, try this :
document.activeElement.blur();
With this you lose focus on the current element and the keyboard disappear.

Categories