Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I show the soft keyboard in a webview with a USB HID device attached when a button is clicked and an input is focused?

Tags:

android

I have a USB barcode scanner which is plugged into the device with USB OTG. Because this is picked up as a keyboard HID device, the soft keyboard is disabled when inputs are focused.

I currently have a method which triggers the keyboard from JavaScript.

class JsObject {
    @JavascriptInterface
    public void InvokeKeyboard() {
        InputMethodManager inputMethodManager = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
        inputMethodManager.showSoftInput(findViewById(R.id.webView), InputMethodManager.SHOW_FORCED);
    }
}

webview.addJavascriptInterface(new JsObject(), "Android");

I'm basically wanting it to open the keyboard on the following action inside the webview.

const button = document.querySelector('.fire-keyboard');
button.addEventListener('click', () => Android.InvokeKeyboard());

It works when called from the webview manually but I want to be able to click a button which triggers it, and clicking the button loses the input box focus.

Just to add, I don't want the keyboard to show when focusing an input box, only to show when a button is clicked to trigger it. By default it shows on focus.

like image 625
Ben Fortune Avatar asked Sep 10 '25 21:09

Ben Fortune


2 Answers

Turns out I just needed to have this hardware toggle on.

enter image description here

like image 139
Ben Fortune Avatar answered Sep 12 '25 12:09

Ben Fortune


May be it is due to device you are using. I made a sample according to your scenario and successfully run it on Nexus5 device which I am using.

Just use document.getElementById("mytextfield").focus(); in JS code which did the trick.

Sample html code

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<form name="myform">
<input type="text" id="mytextfield">
</form>

<input type="button" value="Click Me!" onClick="executeAndroidCode()" />

<script type="text/javascript">
    function executeAndroidCode() {
        Android.execAndroid();
        document.getElementById("mytextfield").focus(); //this line did the trick after click on button
    }
</script>

</body>

</html>

Save this file in asset named index.html

JavaScriptInterface

public class WebAppInterface 
    {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }

        @JavascriptInterface
        public void execAndroid() {
            InputMethodManager inputMethodManager = (InputMethodManager)
                    getSystemService(Context.INPUT_METHOD_SERVICE);
            inputMethodManager.showSoftInput(findViewById(R.id.webView1), 
                    InputMethodManager.SHOW_FORCED);
        }
    }

onCreate Code

WebView wv = (WebView) findViewById(R.id.webView1);
        wv.addJavascriptInterface(new WebAppInterface(this), "Android");

        WebSettings webSettings = wv.getSettings();
        webSettings.setJavaScriptEnabled(true);

        wv.loadUrl("file:///android_asset/index.html");

Its working fine on my side I am using Nexus5. Although cursor won't showed up in screenshot but it is blinking when I run the app.

enter image description here

like image 25
Zubair Ahmed Avatar answered Sep 12 '25 11:09

Zubair Ahmed