You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何解决移动端虚拟键盘遮挡TextMeshPro输入框及切换时闪烁问题?

解决TextMeshPro InputField移动端虚拟键盘的两个常见问题

问题1:输入框切换焦点时虚拟键盘闪烁

在多个TMP_InputField间切换焦点时,虚拟键盘会短暂隐藏后重新弹出,产生闪烁效果。

解决方法:

  • 修改输入框默认事件:取消TMP_InputFieldOn End Edit默认绑定的HideKeyboard()行为,改用自定义焦点切换逻辑,直接让下一个输入框获取焦点,跳过键盘隐藏步骤。
  • 使用自定义焦点切换脚本
using TMPro;
using UnityEngine;

public class InputFocusSwitcher : MonoBehaviour
{
    public TMP_InputField targetInput;

    public void SwitchToTarget()
    {
        targetInput.Select();
        targetInput.ActivateInputField();
    }
}

将该脚本挂载到输入框所在物体上,在On End Edit事件中绑定SwitchToTarget方法,指定下一个要聚焦的输入框即可。

  • 升级Unity/TMP版本:部分旧版本Unity或TMP包存在焦点切换的键盘处理bug,升级到2021.3 LTS及以上版本,同时更新TextMeshPro包至3.0+版本可修复此类问题。

问题2:虚拟键盘遮挡底部输入框

屏幕存在多个输入框时,底部的输入框会被弹出的虚拟键盘完全或部分遮挡。

解决方法:

  • 动态调整UI位置:监听虚拟键盘显示状态,实时调整输入框容器的位置:
using UnityEngine;
using UnityEngine.UI;

public class KeyboardUIAdjuster : MonoBehaviour
{
    public RectTransform inputContainer;
    private float originalY;

    void Start()
    {
        originalY = inputContainer.anchoredPosition.y;
    }

    void Update()
    {
        if (TouchScreenKeyboard.visible)
        {
            float keyboardHeight = TouchScreenKeyboard.area.height / Screen.height * inputContainer.rect.height;
            inputContainer.anchoredPosition = new Vector2(inputContainer.anchoredPosition.x, originalY + keyboardHeight);
        }
        else
        {
            inputContainer.anchoredPosition = new Vector2(inputContainer.anchoredPosition.x, originalY);
        }
    }
}
  • 用ScrollRect实现自动滚动:将所有输入框放入ScrollRect中,输入框获取焦点时自动滚动到可见区域:
using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class ScrollToActiveInput : MonoBehaviour
{
    public ScrollRect scrollRect;
    private TMP_InputField inputField;

    void Awake()
    {
        inputField = GetComponent<TMP_InputField>();
        inputField.onSelect.AddListener(_ => ScrollToInput());
    }

    void ScrollToInput()
    {
        Canvas.ForceUpdateCanvases();
        scrollRect.normalizedPosition = new Vector2(scrollRect.normalizedPosition.x, 
            1 - (inputField.rectTransform.anchoredPosition.y + inputField.rectTransform.sizeDelta.y / 2) / scrollRect.content.rect.height);
    }
}
  • 优化Canvas设置:将Canvas渲染模式设为Screen Space - Overlay,UI缩放模式选择Scale With Screen Size,确保UI在不同设备分辨率下适配正确,降低遮挡概率。

内容的提问来源于stack exchange,提问作者Axay Gadhiya

火山引擎 最新活动