如何在页面加载时自动显示键盘答案

【问题标题】：How to display the keyboard automatically on page load如何在页面加载时自动显示键盘
【发布时间】：2020-02-26 23:55:23
【问题描述】：

我正在使用 NativeScript-Vue 构建一个移动应用程序。我在页面上有一个 TextField，并且希望键盘在页面/屏幕加载时自动显示，而不必点击 TextField。

我已经为我的 TextField 分配了一个 'textFieldId' 的引用，并编写了一个函数，该函数应该以这个 TextField 为目标并使其成为焦点。我已将此函数放在组件的方法部分，并在mounted() 挂钩中调用它。

页面加载时键盘不显示，我不确定它是否需要在不同的钩子中？我已经完成了我所针对的 TextField 的控制台日志，并且它肯定是针对它的。我还将函数设置为在页面上另一个元素的点击事件上运行，并且键盘按预期显示。

我在 Android 模拟器中运行该应用程序，但也使用命令 tns preview 在我的 iPhone 上进行了检查，但问题仍然存在 - 所以我认为这不是特定于设备的问题。

<script>
    export default {
        mounted() {
            console.log('mounted')
            showKeyboard()
        },
        methods: {
            showKeyboard () {
                this.$refs.textFieldId.nativeView.focus()
        }
    }
</script>

还有文本域

<TextField
    hint="Type here"
    class="input type-text"
    ref="textFieldId"/>

键盘在页面加载时不显示 - 它仅在我单击 TextField 时显示。我希望它在没有任何用户输入的情况下自动显示。

【问题讨论】：

标签： android ios vue.js mobile nativescript-vue

【解决方案1】：

回复here。无论如何，这就是我在 NativeScript-Vue 上所做的：

<template>
    <TextField @loaded="showKeyboard" />
</template>

<script>
import * as utils from "tns-core-modules/utils/utils";

export default {
    methods: {
        showKeyboard({ object }) {
            if (object.android) {
                setTimeout(() => {
                    object.focus();
                    utils.ad.showSoftInput(object);
                }, 10);
            } else {
                object.focus();
            }
        }
    }
}
</script>

【讨论】：