从 JSF (Primefaces) 设置 HTML5 输入模式答案

【问题标题】：Setting HTML5 input pattern from JSF (Primefaces)从 JSF (Primefaces) 设置 HTML5 输入模式
【发布时间】：2013-07-05 08:00:26
【问题描述】：

我正在使用 Primefaces inputMask 来格式化电话号码。但是该组件不支持 HTML5 模式属性，因此不会导致 iOS 数字小键盘出现。

我希望结果输出看起来有点像

    <input type="text" pattern="\d*"/>

我曾尝试使用 javascript 在页面加载时编写模式属性，但无法使其正常工作（例如）

    $(document).ready(function() {
       $("#userPhDay").pattern="\d*";
    });

我正在玩弄使用上述 html5 输入然后将结果更改为 h:inputHidden 的想法。另一种选择是在实现这一点的primefaces之上创建我自己的标签库。

我发现 BalusC（我最喜欢的关于 JavaEE 的所有东西的参考资料）在他的博客文章 http://balusc.blogspot.com.au/2012/06/adding-html5-attributes-to-standard-jsf.html 中为 Omnifaces 介绍了这一点。他走上了自定义渲染器的道路。我认为 Balus 会说除了 Primefaces 之外我还应该使用 Omnifaces 来回答这个问题。

其他人为在 JSF 的移动设备上展示数字小键盘做了什么？

干杯，埃德。

【问题讨论】：

您可以随时编辑您的消息。

标签： jquery html jsf primefaces

【解决方案1】：

正如问题编辑中提到的，他博客中的 BalusC 解决方案有效。总之，您将 OmniFaces 与 Primefaces 结合使用，使用来自 OmniFaces 的自定义 HTML5 渲染器来提供 HTML5 标签。

要做到这一点很简单：

将 OmniFaces 依赖添加到您的 pom 中以供 maven 获取：

<dependency>
    <groupId>org.omnifaces</groupId>
    <artifactId>omnifaces</artifactId>
    <version>1.5</version>
</dependency>

在 faces-config.xml 中添加自定义渲染器：

<factory>
    <render-kit-factory>org.omnifaces.renderkit.Html5RenderKitFactory</render-kit-factory>
</factory>

然后你就可以开始使用 HTML5 标签了，例如

<h:inputText id="userPhDay" required="true" value="#{testBean.daytimePhone}" max="20" pattern="\d*" placeholder="99999999"/>

为了向后兼容，您总是可以添加 javascript 验证和过滤，我将在接下来进行。

感谢 BalusC！

【讨论】：

仅供参考。如果您想保留 primefaces 皮肤，这也适用于 p:inputText。
您也可以只使用type="number"（仅用于数字）或type="tel"（用于电话号码）来代替pattern="\d*"
一个问题是，当结合 Omnifaces (1.5) 和 Primefaces (3.5) 时，它允许我在 primefaces 组件上使用 HTML5 属性，但是它破坏了 p:calendar 模式属性，我猜是 OmniFaces以某种方式劫持了它。在 primefaces 中，它是日期模式，而 OmniFaces 已将其传递给底层 HTML5 输入，这当然无法验证“dd/MM/yyyy”。
使用 PrimeFaces 4.0 和 JSF 2.2 blog.primefaces.org/?p=2714 更容易