Как автоматически отображать клавиатуру при загрузке страницы

Я создаю мобильное приложение с помощью NativeScript-Vue. У меня есть TextField на странице, и я хочу, чтобы клавиатура автоматически отображалась при загрузке страницы / экрана, вместо того, чтобы нажимать на TextField.

Я присвоил своему TextField ссылку «textFieldId» и написал функцию, которая должна нацеливать это TextField и фокусировать его. Я поместил эту функцию в раздел методов компонента и вызвал ее в ловушке mount ().

Клавиатура не отображается при загрузке страницы, и я не уверен, нужно ли ей использовать другой крючок? Я сделал консольный журнал для TextField, на который я нацелен, и он определенно нацелился на него. Я также установил функцию для запуска при событии касания другого элемента на странице, и клавиатура будет отображаться должным образом.

Я запускаю приложение в эмуляторе Android, но также проверил на своем iPhone команду tns preview, и проблема все та же, поэтому я не верю, что это проблема конкретного устройства.

<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"/>

Клавиатура не отображается при загрузке страницы - она ​​отображается только тогда, когда я нажимаю на текстовое поле. Я хотел бы, чтобы он отображался автоматически без какого-либо пользовательского ввода.


ios mobile android vue.js nativescript-vue
person matt93    schedule 31.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ответили здесь. В любом случае, это то, что я сделал в 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>
person TomG    schedule 05.11.2019