当用户单击javascript mottie虚拟键盘键之间的小空间时，有没有办法防止焦点从元素模糊？

Posted 2023-03-14

【中文标题】当用户单击javascript mottie虚拟键盘键之间的小空间时，有没有办法防止焦点从元素模糊？

【英文标题】：Is there a way to prevent focus from blurring from an element when the user clicks the small space between javascript mottie virtual keyboard keys?

【发布时间】：2019-12-09 20:38:19

【问题描述】：

我有一个简单的 Web 应用程序，但在特定情况下无法处理 mottie 虚拟键盘。

我的屏幕有许多字段。如果用户单击其中一个文本框（每个文本框都绑定了一个虚拟键盘），则聚焦功能会隐藏页面上的其他元素并放大当前字段/标签。

虚拟键盘在这种状态下工作得很好。当我输入文本然后单击接受或单击虚拟键盘矩形之外的区域时，焦点模糊，键盘消失，所有字段再次显示。

我遇到的问题是，当用户单击虚拟键之间的微小空间或虚拟键盘矩形内不是键的任何区域时，键盘保持可见（应该如此）但所有其他在向下点击期间，元素会在键盘后面的屏幕上闪烁。因此，downclick 导致焦点从所选元素模糊，只有在释放 downclick 后立即再次聚焦。

我希望虚拟键盘的某些参数可以使虚拟键盘的任何非键部分成为点击的死区，但我一直无法找到它。有没有人有这方面的经验？谢谢！

【问题讨论】：

在键盘的 onclick/mousedown 处理程序中，添加 e.stopPropagation() ，这将阻止任何包含或底层的兄弟姐妹接收点击事件。

请在小提琴或其他任何地方产生错误。我们不能只用一堆文本来帮助你，而我们试图找出可能使用什么样的代码......

【参考方案1】：

如果您想将焦点返回到文本框，那么不妨试试这样的方法 (demo)：

$(function() 
  $('#keyboard').keyboard(
      visible: function(e, keyboard, el) 
        keyboard.$keyboard.on('mousedown', function() 
          setTimeout(function() 
            keyboard.$preview.focus();
          , 100);
        );
      
    );
);

我一开始是通过“点击”来实现的，但直到释放鼠标后它才聚焦。我不确定您为什么看到所有内容都消失了（可能是 css :active 设置？）但这应该几乎立即恢复焦点。