Android WebView - 以编程方式在第 3 方网页的输入字段上强制使用数字键盘？

Question

快速上下文：我们有一个非常独特的情况，我们正在切换到一个新的人力资源平台，它只允许我们的工厂员工通过时钟网页计时。我们已经在我们的大楼各处放置了几台三星 Galaxy Tab A 设备，作为当前 HR 系统的时钟亭。由于我们一次只能通过 Knox 将这些平板电脑锁定到一个应用程序，因此 Chrome 网络浏览器会让员工意外地离开新平台的时钟网页，并给其他尝试打卡或打卡的人带来问题出。

SO，我们已经设置了一个 Android 应用程序，它实现了一个基本的 WebView，硬编码到新人力资源公司提供给我们的时钟 URL。 HOWEVER，这里的大问题是没有页面键盘，徽章 ID 字段的类型是 text，这会调用 Android 徽章 ID PIN 的 qwerty 键盘，它只会是所有数字......一家第 3 方公司为人力资源公司建立了这个网页，所以如果我们能在他们的最后改变它，我会感到惊讶。

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

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 开发人员！我们已经尝试研究和尝试以下想法：

每当调用 qwerty 键盘然后调用数字或电话键盘时的事件侦听器
从 WebView 获取 HTML 内容，查找 <input type="text"> 标签并尝试以编程方式将其更改为 number 或 tel 以获得正确的键盘显示
强制我们的应用程序调用数字键盘并严格将其保留在网页上方
我们看到有人提到 EditText class 用于配置输入和键盘类型，但问题当然是我们没有在我们的内部处理有问题的输入app，通过我们的WebView在别人的网页上

这当然是一个非常小的边缘案例问题，我们不得不为自己想出一个复杂的解决方案...我们可以在任何 Android 设备上观察 which input types yield which keyboards。我们所要做的就是在我们的应用程序中的这个 WebView 网站上显示一个数字软键盘，这样员工就可以轻松地走上去，输入他们的徽章并完成他们的时钟操作。

我希望这是简洁而彻底的...这里一定有一个创造性的解决方案，有人对我们如何实现这一目标有任何建议或建议吗？即使只是为我们指明正确的方向，我们也将不胜感激......谢谢！！

Answer 1

在您的 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 更改为您自己的。

在 activity 的 onCreate 中：

webview.setWebViewClient(new MyWebViewClient());

Android WebView - 以编程方式在第 3 方网页的输入字段上强制使用数字键盘？

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

html

android

user-input

webview

android-softkeyboard