Android WebView - Programmatically forcing numeric keyboard on 3rd party webpage's input field?

Question

Quick context: We have a pretty unique situation where we're switching to a new HR platform which will only allow our factory employees to timekeep via a timeclock webpage. We already have several Samsung Galaxy Tab A devices positioned throughout our building that serve as timeclock kiosks for the current HR system. Since we can only lock these tablets down to a single app at a time via Knox, a Chrome web browser for example would let employees accidentally navigate off the new platform's timeclock webpage and create issues for others trying to clock-in or out.

SO, we already setup an Android app that implements a basic WebView hard-coded to the timeclock URL the new HR company provided us. HOWEVER, the big problem here is that there's no on-page keyboard and the badge ID field is of type text, which invokes the Android qwerty keyboard for a badge ID PIN that would only ever be all numbers... A 3rd-party company built this webpage for the HR company so I'd be surprised if we could ever get it changed on their end.

---

Just to show some of our basic boilerplate to achieve the above...

AndroidManifest.xml

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="Paytime Time Clock"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.PaytimeWebpage"
        android:usesCleartextTraffic="true">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

MainActivity.java

    public class MainActivity extends AppCompatActivity {
        private WebView webView;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            webView = (WebView) findViewById(R.id.webview);
            webView.setWebViewClient(new WebViewClient());
            webView.setInitialScale(300);
            webView.loadUrl("https://site.time.clock");

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

        }
    }

Activity_Main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    </RelativeLayout>

We've done tons of exhaustive searching and really tried to think outside the box here but as only 2 SysAdmins at a small manufacturer we are by no means seasoned Java devs! We've tried researching and attempting the following ideas:

• Event listener for whenever the qwerty keyboard is invoked to then instead invoke the numeric or telephone keyboard
• Get HTML content from WebView, look for the <input type="text"> tag and try to programmatically change it to either number or tel in order to get the right keyboard to show
• Force our app to invoke the numeric keyboard and strictly keep it there above the web page
• We've seen guys mentioning the EditText class for configuring input and keyboard types, but the problem with that is of course that we're not handling the input in question here within our app, it's on someone else's webpage through our WebView

This is of course a very minor edge-case issue that we're forced to come up with a complicated solution to ourselves... We can observe which input types yield which keyboards on any Android device. All we have to do is get a numeric soft-keyboard shown on this WebView'd site within our app such that employees can easily walk up, input their badge and complete their clock action.

I hope this was concise but thorough... There must be a creative solution here, does anybody have any suggestions or recommendations of how we can accomplish this? Even just pointing us in the right direction would be hugely appreciated... THANKS!!

Answer 1

In your WebViewClient, override onPageFinished() and do the following in it:

webView.loadUrl("javascript:document.getElementById('FldBadge').getElementsByTagName('input')[0].type='number';");

The idea is to modify the loaded page so that it behaves the way you need.

UPDATE: Full code

        public class MyWebViewClient extends WebViewClient {
          public void onPageFinished (WebView view, String url) {
            if(url.equals("https://my.website.url")) {     
webView.loadUrl("javascript:document.getElementById('FldBadge').getElementByTagName('input')[0].type='number';");
            }
          }
        }

Don't forget to change the URL in the code to your own.

In the activity's onCreate:

webview.setWebViewClient(new MyWebViewClient());