Prevent soft keyboard closing on text input blur - javascript

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?

Related

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?

How to handle differences in iOS and Android Keyboard

For HTML/JS in mobile browsers, I'm having an issue where blur events trigger differently in iOS and Android. In iOS, a user can click on "Done" on the native keyboard, which hides the keyboard and causes the focused element to blur.
The same, however, does not happen when a user clicks the back icon in Android to hide the native keyboard; The elements that were previously focused keep their focus.
Is there a way to listen for the keyboard hiding and trigger a blur on the focused element? Or is there a way to force the Android keyboard to display a "done" button? Or is there a generally better solution?
Maybe a solution would be to listen to the keydown event on the input, and check if the keypress is "Enter".
To do that, please refer to this :
Enter key press event in JavaScript

Android browser does not update DOM while keyboard open

I have a textarea element on a web page, with some JavaScript code which executes on certain keyboard events; among other things the JS code should make some visible updates to the page.
On desktop browsers, and also on iOS this works fine, however on the stock Android browser (Samsung Galaxy S3 running 4.0.4) none of the page updates occur until the onscreen keyboard is closed. The page updates seem to get 'buffered' and once the keyboard closes they all run in quick succession.
I know the event handlers are running while the keyboard is open, because if I insert some alert statements into them then the alert dialogs appear with each keypress rather than waiting for the keyboard to close.
Does anyone else seen this, or know of a workaround?

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?

Javascript / jQuery Windows 8 On-Screen Keyboard

I'm trying to build an application where if the user activates a page, a focus event will occur and focus into a text field. I was half-heartedly expecting that when I called .focus() on in the input box, Windows 8 would pop-up the on-screen keyboard. This in not the case.
Does anyone know of a way to get the Windows 8 on-screen keyboard to come up when the text field is focused via javascript.
If the user "taps" into the textfield, the focus event does fire and the keyboard comes up.
I've tried binding to touchstart, 'touchend, click and focus, but all of these do not seem to activate the on-screen keyboard.
This application will run strictly on Windows 8, so there is no need to make it so that other platforms that do not have built-in on-screen keyboards work properly.
You can't. Only user actions can open the on-screen keyboard. This is by design. See here.

Categories