Show keyboard web application - javascript

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.

Related

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?

calling .focus() on <input type="text"> in WKWebView causes keyboard lag

I'm building an app in HTML5 and Javascript using WKWebView.
I have a very plain text input that I want to call focus() on manually via javascript. It does work, the keyboard pops up and there is a cursor in the input however the iOS keyboard is very laggy when typing/deleting the first character. It takes over a second for the character to appear and for the keyboard to become interactive again.
Does anyone have any idea on how what the problem might be?
Try using click() instead of focus(). Both will give you the same response provided u dont have any events attached to onclick of the text box.
We had a similar problem in an AngularJS app with WKWebview and we solved it by using ng-click event instead of ng-focus (only on iOS).

Enable/Disable Android virtual keyboard with dummy textarea

I want to have virtual keyboard for jquery terminal, here is my test code: http://terminal.jcubic.pl/android.html
the plugin code is here: http://terminal.jcubic.pl/js/jquery.terminal-src.js (uncommitted)
For a moment it was working but it stopped, even then I run focus and blur on textarea the keyboard don't show up. The cursor is not in textarea. The focus/blur work when I run the page on desktop Chromium.
Anybody know why textarea don't have focus?
Sometimes the cursor is inside but the keyboard don't show up and there is no that green outline. Sometime it get focus but then blur. Virtual keyboard show up only when I click inside textarea. I can't find any code that may cause this and why it was working for a moment (but not exactly I wanted).
I've try:
$('textarea').blur(function() { return false; });
or call preventDefault when I click the terminal. (the textarea is my clipboard but I want to reuse it). I keep trying different things with no success.
I've solve the issue, two things about andorid I've found. You can't delay action that trigger focus on textarea/input it need to be direct call (stack of focus call need point to html/browser native action), and it's seems that you can focus (trigger virtual keyboard) only on native events, (for instance you can't focus on load).

Show android keyboard from 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?

Catch click/touch event before keyboard when it's enabled - iPad and TinyMCE

iPad issue - expert wanted.
I'm making a small website.
As part of the web the user types text using TinyMCE, and I wrap this text in html tags. When the user clicks one of the tags, an event is fired.
so far, all is good, BUT, when using iPad, once the keyboard is down (disabled) the event is fired as expected, but if the keyboard is up and the user touches one of the tags, the event is not working at all.
I need both the event and the keyboard - Is there a way to fire an event before the keyboard catches it using JavaScript/jQuery or any other web language?

Categories