Get Android to treat HTML Select like Android Spinner?

Question

Android Spinner GUI component is a typical droplist with autocomplete.
HTML5 select with a datalist is too, but unfortunately, HTML5 with datalist in Android is NOT.

Of course Android won't support datalist until next year (they claim). More importantly, any HTML select is a hack-job Android thing on a tablet. On a phone, its OK. On the tablet, the select is not a drop down but a short list slides up at the bottom of the screen. That list has radio buttons and a Done button. Its a weird little UI component which warts into the screen instead of a drop list displaying. Is there are way to tell Android to do the right thing? To treat this like one does in a web browser on a desktop?

I have used the jQuery UI droplist and it is OK on a tablet but then bad on a phone. On the phone the keyboard comes up and blocks the display. Is there any way to tell Android to do the right thing? To not show the keyboard for this particular html input element?

Can I tell Android to:

1. Not show keyboard for some elements?
2. Not do that stupid iPad-style wart but do html select's like a normal browser, and like they do their own droplist Spinner?

Answer 1

It is a little bit hacky but it is possible. You have to create a javascript bridge between the WebView and your java code.

class JsBridge {
   @JavascriptInterface
   public void showNativeSpinner() {
       // show native spinner logic
   }
}

webView.addJavascriptInterface(new JsBridge(), "jsBridge");

In your html code you have to remove/hide the select and add somekind of placeholder that can be clicked. Disabling the select won't work because disabled element cannot receive events (cannot be clicked). And then attach a onclick callback that triggers the bridge method. All of this can be done using javascript.

$("#my-select").hide();
$("#my-select-parent").append("<div id='placeholder'></div>");
$("#placeholder").on("click", function() {
    jsBridge.showNativeSpinner();
});

You can execute javascript`` code to theWebViewfrom thejava``` code this way

webView.loadUrl("javascript:yourLogicFunction()");

The last thing you should to is to add an OnItemSelectedListener to the spinner and in the listener method to call javascript callbacks in the WebView using the loadUrl method again.

This should solve your problem :)