Nativescript中特定TextField保持焦点且完全隐藏软键盘的实现问题

实现思路 #

• 针对当前扫码用的TextField单独禁用软键盘触发逻辑，不影响应用其他模块的软键盘使用
• 从输入框属性和原生层控制两方面入手，完全避免软键盘弹出，替代原有「弹出后再收起」的逻辑，不会出现闪烁

代码修改 #

1. HTML 代码调整 #

给TextField添加禁用软键盘相关属性，同时隐藏输入框不占用布局：

<StackLayout class="layout-container">
    <TextField #scannerInput 
        name="scannerInput"
        id="scannerInput"
        (returnPress)="scanComplete($event)"
        showSoftInputOnFocus="false"
        keyboardType="none"
        autocorrect="false"
        autocapitalizationType="none"
        style="height: 0; width: 0; opacity: 0; position: absolute;">
    </TextField>
</StackLayout>

属性说明：

• showSoftInputOnFocus="false"：安卓端原生属性，焦点获取时直接禁止弹出软键盘
• keyboardType="none"：指定无键盘类型，减少软键盘触发可能
• 样式属性：将输入框移出可视区域，不影响原有布局

2. TS 代码调整 #

兼容iOS端的软键盘禁用，同时优化焦点获取逻辑的执行时机：

import { isIOS } from "@nativescript/core";
// 其余原有导入保持不变

@ViewChild("scannerInput") scannerInput: ElementRef;
private _isRunning: boolean;

constructor() {}

// 替换原有ngOnInit逻辑，ngAfterViewInit时才能确保获取到输入框实例
ngAfterViewInit(): void {
    // iOS端原生层禁用软键盘
    if (isIOS) {
        const textField = this.scannerInput.nativeElement as TextField;
        textField.ios.inputView = UIView.alloc().initWithFrame(CGRectZero);
    }
    this._isRunning = true;
    this.keepFocus();
}

ngOnDestroy(): void {
    this._isRunning = false;
}

scanComplete($event) {
    const scan = this.scannerInput.nativeElement as TextField;
    // 此处保留原有条码取值逻辑
    scan.text = "";
}

keepFocus() {
    // 增加非空判断，避免组件销毁时执行报错
    if (!this._isRunning || !this.scannerInput?.nativeElement) {
        return;
    }
    setTimeout(() => {
        const scan = this.scannerInput.nativeElement as TextField;
        scan.focus();
        this.keepFocus();
    }, 500)
}

效果说明 #

• 全程不会触发软键盘弹出，没有闪烁问题
• 仅针对当前扫码输入框禁用软键盘，其他页面的输入框可以正常唤起软键盘
• 蓝牙扫码枪属于外接物理输入设备，只要输入框持有焦点即可正常接收输入，不受软键盘禁用的影响

内容的提问来源于stack exchange，提问作者yswanderer