PrimeFaces Keyboard

It is a input text box which displays virtual keyboard to enter data. It used to get user input by using pointer device. So, a user can enter input without having keyboard. The <p:keyboard> component is used to create virtual keyboard. The keyboard attributes are tabled below.

Password Attributes

Attribute	Default value	Type	Description
password	false	Boolean	It is used to make the input a password field.
showMode	focus	String	It specifies the showMode.
buttonImage	null	String	It is used to set image for the button.
ButtonImageOnly	false	Boolean	When set to true only image of the button would be displayed.
effect	fadeIn	String	It is used to set effect of the display animation.
effectDuration	null	String	It is used to set length of the display animation.
layout	qwerty	String	Set layout of the keyboard.
layoutTemplate	null	String	It is used to set template of the custom layout.
keypadOnly	focus	Boolean	It specifies displaying a keypad instead of a keyboard.
promptLabel	null	String	It is used to set label of the prompt text.
closeLabel	null	String	It is used to set label of the close key.
clearLabel	null	String	It is used to set label of the clear key.
backspaceLabel	null	String	It is used to set label of the backspace key.
alt	null	String	It is used to set alternate textual description of the input field.
maxlength	null	Integer	It is used to set maximum number of characters that may be entered in this field.
title	null	String	It is used to set advisory tooltip information.

Example

Here, in the following example, we are implementing <p:keyboard> component. This example contains the following files.

JSF File

// keyboard.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>keyboard</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="User Name: " />
<p:keyboard id="keyboard" value="#{keyboard.value}" />
</h:panelGrid>
<br/>
<p:commandButton value="Submit" icon="ui-icon-check" />
</h:form>
</h:body>
</html>

ManagedBean

// Keyboard.java

package com.javatpoint;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Keyboard {
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}

Output: