Question

为了使网站对移动设备友好，我想添加

<input type="email">

和

<input type="tel">

但我必须使用像

这样的JSF

<h:inputText  value="#{connetcionController.userName}" />

我们如何使用JSF生成html输入类型？

我也在使用primefaces，他们有类似的功能吗？

Answer 1

您应该能够将type与<p:inputText一起使用喜欢这个

<p:inputText type="email" value="#{connetcionController.userName}" />

或

<p:inputText type="tel" value="#{connetcionController.userName}" />

或者使用@Mowgli已经提到的 omnifaces

只需将 omnifaces 库添加到您的项目中并添加

即可

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

到您的 faces-config.xml 文件并使用type="tel"（或任何其他类型免费..）

喜欢这个

<h:inputText type="tel"

Answer 2

有一种非常简单的方法。您可以使用传递。将其添加到您的html标记

xmlns:a="http://xmlns.jcp.org/jsf/passthrough"

然后，您可以添加输入类型您必须先添加a:。

<h:inputText a:type="email" value="#{profileBean.student.privateMail}"/>

这也适用于其他一些定义，例如占位符

<h:inputSecret a:placeholder="Password" value="#{loginBean.credentials.password}" />

Answer 3

OmniFaces提供了解决方案。有关如何使用omnifaces的信息，请参阅this explanation。

Answer 4

您可以使用jQuery插件来屏蔽正常的<input id="phone" />：

jQuery(function($){
   $("#phone").mask("(999) 999-9999");
});