NativeScript-core：空文本框按退格键时如何切换焦点至上一个输入框？

完全可以实现这个需求！我来给你一步步拆解具体的实现方式，兼顾iOS和Android平台的兼容性：

核心逻辑是监听每个输入框的键盘按键事件，判断是否为退格键且当前输入框为空，然后手动切换焦点到上一个输入框。顺便还可以加上输入满1位后自动跳转到下一个输入框的逻辑，提升整体用户体验。

1. 布局中配置TextField #

在XML布局里，保持你原有的maxLength="1"和keyboardType="number"配置即可，不需要额外加id（我们会通过遍历容器子元素的方式获取所有输入框）：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onPageLoaded">
    <StackLayout class="input-group">
        <TextField text="{{ number1 }}" hint="" maxLength="1" keyboardType="number"/>
        <TextField text="{{ number2 }}" hint="" maxLength="1" keyboardType="number"/>
        <TextField text="{{ number3 }}" hint="" maxLength="1" keyboardType="number"/>
        <!-- 按需添加更多输入框 -->
    </StackLayout>
</Page>

2. 编写焦点跳转逻辑 #

在页面的loaded事件中，我们先获取所有TextField元素，然后给每个绑定按键监听和文本变化监听：

TypeScript版本 #

import { Page, TextField, KeyEvent, View } from "@nativescript/core";

// 递归查找所有子元素中的TextField（兼容任何嵌套布局）
function getAllTextFields(parent: View): TextField[] {
    let fields: TextField[] = [];
    const children = parent.getChildren();
    
    for (const child of children) {
        if (child instanceof TextField) {
            fields.push(child);
        }
        // 如果是容器类元素，继续递归查找子元素
        if (typeof (child as any).getChildren === "function") {
            fields = fields.concat(getAllTextFields(child as View));
        }
    }
    return fields;
}

export function onPageLoaded(args) {
    const page = args.object as Page;
    const allTextFields = getAllTextFields(page.content);

    allTextFields.forEach((field, index) => {
        // 监听退格键事件
        field.on("keyDown", (event: KeyEvent) => {
            // 判断是否为退格键：Android是keyCode=67，iOS是keyCode=8，同时兼容key字符串判断
            const isBackspace = event.keyCode === 67 || event.keyCode === 8 || event.key === "Backspace";
            
            if (isBackspace && field.text === "") {
                // 跳转到上一个输入框（如果存在）
                if (index > 0) {
                    allTextFields[index - 1].focus();
                }
                // 取消默认退格行为，避免不必要的系统操作
                event.cancel = true;
            }
        });

        // 可选优化：输入满1位后自动跳转到下一个输入框
        field.on("textChange", () => {
            if (field.text.length === 1 && index < allTextFields.length - 1) {
                allTextFields[index + 1].focus();
            }
        });
    });
}

JavaScript版本 #

const { Page, TextField } = require("@nativescript/core");

function getAllTextFields(parent) {
    let fields = [];
    const children = parent.getChildren();
    
    for (const child of children) {
        if (child instanceof TextField) {
            fields.push(child);
        }
        if (typeof child.getChildren === "function") {
            fields = fields.concat(getAllTextFields(child));
        }
    }
    return fields;
}

exports.onPageLoaded = function(args) {
    const page = args.object;
    const allTextFields = getAllTextFields(page.content);

    allTextFields.forEach((field, index) => {
        field.on("keyDown", (event) => {
            const isBackspace = event.keyCode === 67 || event.keyCode === 8 || event.key === "Backspace";
            
            if (isBackspace && field.text === "") {
                if (index > 0) {
                    allTextFields[index - 1].focus();
                }
                event.cancel = true;
            }
        });

        field.on("textChange", () => {
            if (field.text.length === 1 && index < allTextFields.length - 1) {
                allTextFields[index + 1].focus();
            }
        });
    });
};

3. 关键注意事项 #

• 平台兼容性：不同平台的退格键keyCode存在差异，所以我们同时判断了Android的67、iOS的8以及event.key字符串，确保全平台生效。
• 嵌套布局兼容：使用递归函数查找所有TextField，不管输入框放在哪种容器里，都能正确获取。
• 取消默认事件：处理退格跳转时设置event.cancel = true，避免部分平台出现光标乱跑等异常行为。

这样就能完美实现你想要的功能啦！

内容的提问来源于stack exchange，提问作者Jegors Čemisovs