首页 > 解决方案 > Android WebView - 以编程方式强制第三方网页的输入字段上的数字键盘?

问题描述

快速背景:我们有一个非常独特的情况,我们正在切换到一个新的 HR 平台,该平台只允许我们的工厂员工通过时钟网页计时。我们已经在整个大楼中放置了几台三星 Galaxy Tab A 设备,用作当前 HR 系统的时钟亭。由于我们只能通过 Knox 一次将这些平板电脑锁定到一个应用程序,例如 Chrome 网络浏览器会让员工意外地离开新平台的时钟网页,并为其他尝试打卡或打卡的人制造问题。

所以,我们已经设置了一个 Android 应用程序,它实现了一个基本的 WebView,硬编码到新 HR 公司提供给我们的时钟 URL。但是,这里最大的问题是没有页面键盘,并且徽章 ID 字段的类型为text,它调用 Android qwerty 键盘来获取徽章 ID PIN,而徽章 ID PIN 只能是全数字......一家第 3 方公司为人力资源公司建立了这个网页,所以如果我们能最终改变它,我会感到惊讶。 我们带有 WebView 的自定义 Android 应用程序与同一站点上的开发工具面板并排模拟。


只是为了展示我们实现上述目标的一些基本样板......

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>

我们已经进行了大量详尽的搜索,并且真的试图在这里跳出框框思考,但作为一家小型制造商只有 2 位系统管理员,我们绝不是经验丰富的 Java 开发人员!我们已经尝试研究并尝试以下想法:

这当然是一个非常小的边缘案例问题,我们不得不自己想出一个复杂的解决方案……我们可以观察在任何 Android 设备上哪些输入类型会产生哪些键盘。我们所要做的就是在我们的应用程序的这个 WebView 站点上显示一个数字软键盘,这样员工就可以轻松地走上去,输入他们的徽章并完成他们的时钟操作。

我希望这是简洁而彻底的......这里必须有一个创造性的解决方案,有人对我们如何完成这个有任何建议或建议吗?即使只是将我们指向正确的方向也会非常感激......谢谢!

标签: androidhtmlwebviewuser-inputandroid-softkeyboard

解决方案


在您的 WebViewClient 中,覆盖onPageFinished()并在其中执行以下操作:

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

这个想法是修改加载的页面,使其按照您需要的方式运行。

更新:完整代码

        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';");
            }
          }
        }

不要忘记将代码中的 URL 更改为您自己的。

在活动的 onCreate 中:

webview.setWebViewClient(new MyWebViewClient());

推荐阅读