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

Question

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

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

如何使用Primefaces防止键盘在p: selectonemenmenu上弹出?

但是我需要使用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();
       }
     }                          
 }    

然后我们再次检查它是否是一个移动设备，如果是，我们删除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上找到一个小的工作示例，以及一个在线演示。

Answer 2

在您的selectOneMenu的id上尝试这些(使用jQuery)

$(".mySelect").focus(function() {
        $(this).blur();
 });

或

$('body').on("focus", '.mySelect', function(){
        $(this).blur();
});

或其他使用blur属性的例子(仅使用javascript):

如果这些字段的HTML看起来像这样:

<input type="text" name="username" id="username">
<input type="password" name="password" id="password">

那么JavaScript将是:

document.getElementById('username').blur();
document.getElementById('password').blur();

Blur:是一个在元素失去焦点时发送给元素的事件

这些对我以前有效。我希望这对你有帮助!

:)