Avoid showing the keyboard when selectOneMenu is selected on mobile devices

Question

I need to avoid to show the keyboard when selectOneMenu is selected on mobile devices.

Someone suggests using h: selectOneMenu in this question:

How to prevent the keyboard from appearing on p: selectOneMenu using Primefaces?

But I need to use the p component: selectOneMenu

Answer 1

You can override the function SelectOneMenu focusFilter.

What we need to do is add one more condition, if it is not a mobile device, otherwise it will not.

Here the overridden function just execute it in document.ready.

//check if it 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, -.

Answer 2

selectOneMenu ( 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();

: ,

. , !

:)