Show the soft keyboard in Android with JavaScript

Question

I'm developing a Web App and trying to find a way to show the soft keyboard in Android browser when user tap a canvas. I found a very simple way to do that with iOS, but with Android seems not possible.

<canvas id="myCanvas" style="width:100px;height:50px;background-color:gray" tabindex="0" contenteditable="true"></div>
...
$(document).ready(function() {
    $('#myCanvas').click(function(e){ $(this).focus(); });
})

Above code works in iOS, but not in Android. Also I don't really like the contenteditable=true, because it shows a blinking cursor in iOS and tested with div in Android it lets you write directly into the div.

I googled to find a solution, but none of the solutions works.

Any suggestions?

Jay Rathod · Accepted Answer · 2016-01-26 08:57:00Z

2

Try with this.

$(document).ready(function() {
    $('#myCanvas').click(function(e){
        $(this).focus();
    });
    $('#button').click(function(e) {
        $('#myCanvas').trigger('click');
    });
});

Add this line in your Menifest file in Activity tag.

android:windowSoftInputMode="stateVisible"

edited Jan 26, 2016 at 8:57

answered Jan 25, 2016 at 17:06

Jay Rathod

11.2k7 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Denis Cappellin Over a year ago

I tried adding a button as you suggested, but no way. The canvas takes the focus, because I see a yellow border around it, but the soft keyboard doesn't jump out.

Denis Cappellin Over a year ago

Maybe I was not clear in the main description, but I'm not developing an Android App, but a Web App, so I have no way to set a Manifest.

Jay Rathod Over a year ago

you mean web app using phonegap ?

Denis Cappellin Over a year ago

Unfortunately no, just a "simple" HTML page with a bunch of JS libs, so no PhoneGap, Appcelerator, Xamarin of something similar.

Collectives™ on Stack Overflow

Show the soft keyboard in Android with JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related