How to disable focus for the first input in a Primefaces Dialog?

问题

I have a Dialog in my Page, which contains a input field (Date, Calendar) . The problem is that the calendar opens directly after opening the dialog, because the focus is set on the first input.

Is there a way to disable focus in Primefaces?

回答1:

You can change the default behavior;

http://forum.primefaces.org/viewtopic.php?f=3&t=29050

You can always override default behaviors of widgets, for example to prevent calendar focus on dialog opening;

PrimeFaces.widget.Dialog.prototype.applyFocus = function() {
  var firstInput = this.jq.find(':not(:submit):not(:button):input:visible:enabled:first');
  if(!firstInput.hasClass('hasDatepicker')) {
      firstInput.focus();
  }
}

original code is;

PrimeFaces.widget.Dialog.prototype.applyFocus = function() {
  this.jq.find(':not(:submit):not(:button):input:visible:enabled:first').focus();
}

If you put your override after PrimeFaces resources then your applyFocus implementation will be picked up and used instead.

I'd suggest creating a js file like primefaces-overrides.js and put things like this inside, one disadvantage though since you are coding against low level apis, you need to watch out for regressions during migrations although we aim to keep backward compatibility as much as we can.

回答2:

Something simpler could be set focus by default in another input you have.

<p:dialog id="dialog" header="Users" focus="savebtn" widgetVar="txtName">

If you are calling from another file

<p:dialog id="dialog" header="Users" focus="savebtn" widgetVar="formRegUsers:txtName">

回答3:

Another trick to fix this issue:

I have added a text input as first input of the dialog in my dialog:

<p:dialog id="myDialogId" widgetVar="myDialog"....

  <p:inputText id="fixForFocusProblem"/>

  <p:calendar ...
  ..
</p:dialog>

And when showing the dialog I call this:

$('#myForm\\:fixForFocusProblem').show();
myDialog.show(); 
$('#myForm\\:fixForFocusProblem').hide();

This way the focus gets on the input text which gets immediately unvisible.

Not so nice but it works without visually disturbing.

回答4:

This will also do:

<p:dialog onShow="$(document.activeElement).blur()" ...>

Or Primefaces jQuery

<p:dialog onShow="jQuery(document.activeElement).blur()" ...>

回答5:

add this script in your .xhtml :

    PrimeFaces.widget.Dialog.prototype.applyFocus = function () {
        var firstInput = this.jq.find(':not(:submit):not(:button):input:visible:enabled:first');
        if (!firstInput.hasClass('hasDatepicker')) {
            firstInput.focus();
        }
    }

来源：https://stackoverflow.com/questions/15761275/how-to-disable-focus-for-the-first-input-in-a-primefaces-dialog

标签

jsf

primefaces

dialog

focus