3

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

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

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

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

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

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

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

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

干杯，埃德。

4

1 回答 1

2

正如问题编辑中提到的，他博客中的 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 验证和过滤，我接下来要做的。

谢谢巴鲁斯！

于 2013-07-09T02:54:30.223 回答