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

Question

我有一个简单的 Web 应用程序，但在特定情况下处理 mottie 虚拟键盘时遇到了麻烦。

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

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

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

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

Answer 1

如果您想将焦点返回到文本框，那么可以尝试这样的操作( demo ):

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

我一开始将其设置为“单击”，但直到释放鼠标后它才聚焦。我不确定为什么您会看到所有内容都淡出(也许是 css :active 设置？)，但这应该几乎立即恢复焦点。