如何在Primefaces对话框中禁用第一个输入框的焦点？

Question

我在页面上有一个对话框，其中包含一个输入字段（日期，日历）。问题是当打开对话框时，日历会直接弹出，因为焦点设置在第一个输入框上。

有没有一种方法可以在Primefaces中禁用焦点？

- Johnny2012

---

你能否将选项卡顺序设置为不同的字段，以便不同的字段获得焦点？ - maple_shaft

只有一个输入字段 :( - Johnny2012

Answer 1

你可以更改默认行为；

你总是可以覆盖小部件的默认行为，例如防止日历在对话框打开时获得焦点； http://forum.primefaces.org/viewtopic.php?f=3&t=29050

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

原始代码如下：

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

如果您将覆盖放在PrimeFaces资源之后，那么您的applyFocus实现将被捕获并使用。我建议创建一个名为primefaces-overrides.js的js文件，并将此类内容放入其中。但一个缺点是，由于您正在针对低级API进行编码，所以需要注意在迁移期间的回归，尽管我们会尽可能保持向后兼容性。

- Cagatay Civici

---

当有多个日期选择器时，如何解决相同的问题？在一个日期选择器上运行良好。@CagatayCivici - Divyesh Kanzariya

Answer 2

如果您有其他输入框，可以将焦点默认设置为更简单的内容。

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

如果您正在从另一个文件调用

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

- softiecode

---

焦点也可以设置到表单组件。 - unleashed

Answer 3

解决此问题的另一个技巧：

我在我的对话框中添加了一个文本输入作为第一个输入框：

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

  <p:inputText id="fixForFocusProblem"/>

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

当显示对话框时，我调用这个函数：

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

这样可以使输入文本成为焦点，且立即变得不可见。

虽然不太美观，但不会在视觉上造成干扰。

- Samuel

Answer 4

将此脚本添加到您的 .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();
        }
    }

- Patrikoko

---

与被接受答案中的代码相比，这里有什么不同之处？ - Kukeltje

Answer 5

这个也可以：

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

或者是Primefaces jQuery

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

- Walery Strauch

Answer 6

如果你在使用一个日期选择器，我建议这样使用：

<p:datePicker showOnFocus="false" showIcon="true" ... />

- grigouille

---

确实有效，但是日期选择器的弹出层之后完全无法使用。 - undefined

如果你想要弹出窗口，只需点击图标即可。大部分时间，我使用'mask="true"'来提高数据输入速度。 - undefined