jsf - 避免在移动设备上选择 selectOneMenu 时显示键盘

Question

我需要避免在移动设备上选择 selectOneMenu 时显示键盘

有人建议在这个问题中使用 h:selectOneMenu :

How do I prevent the keyboard from popping up on a p:selectOneMenu using Primefaces?

但我需要使用 p:selectOneMenu 组件

Answer 1

您可以覆盖 SelectOneMenu focusFilter功能。

我们要做的是再添加一个条件，如果不是移动设备就做焦点，否则不做。

这是覆盖的函数，只需在 document.ready 中执行它.

//check if it's a mobile device
mobileDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
PrimeFaces.widget.SelectOneMenu.prototype.focusFilter = function(timeout) {
   if(!mobileDevice) {
      if(timeout) {
         var $this = this;
         setTimeout(function() {
            $this.focusFilter();
         }, timeout);
       }
       else {
          this.filterInput.focus();
       }
     }                          
 }    

然后我们再次检查它是否是 mobileDevice，如果是，我们删除 foucsInput这次

if(mobileDevice) {
   for (var propertyName in PrimeFaces.widgets) {
      if (PrimeFaces.widgets[propertyName] instanceof PrimeFaces.widget.SelectOneMenu) {
         PrimeFaces.widgets[propertyName].focusInput.remove();
      }
   }
}

注意:这已在 PrimeFaces 5.2 中修复。

一个小的工作示例可以在 github 上找到, 还有一个 online Demo .