CODEWITHSUNDEEP
androidhtmlwebviewuser-inputandroid-softkeyboard
ZoshMan
ZoshMan

Reputation: 23

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

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. Our custom Android app with WebView emulated side-by-side with the dev tools panel on the same site.

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:

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!!

Upvotes: 1

Views: 1294

Answers (1)

Rediska
Rediska

Reputation: 1470

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());

Upvotes: 1

Related Questions