The inputTextArea
component is an extension to the HTML <textarea>
component with special capabilities, such as auto-growing, auto-resizing, and remaining-character count.
A basic definition for the input text area would be as follows:
<p:inputTextarea value="#{inputTextAreaBean.value}" />
This will render an input text area with the default values rows='3'
and cols='20'
as shown in the following screenshot:
The component also provides auto-resizing with the autoResize
attribute that allows us to expand the height automatically when the text input overflows. The default value is true
. If you want to get the vertical scrollbar, you need to set the autoResize
to false
.
Like the HTML <textarea>
component, we can also specify the rows
and cols
attributes to specify the size of the text area component in rows and columns.
The JavaScript plugin for the inputTextArea
component is solely implemented by PrimeFaces with jQuery. Auto-resizing is executed on the keyup
, focus
, and blur
JavaScript events and it increases the number of rows that the component owns. Remaining character count is executed on the keyup
event, and the content gets trimmed if maxlength
is exceeded. We will get to this trimming feature in the next section.
With the maxlength
attribute, we can limit the maximum allowed characters to be input to the component. There are two more attributes, counter
and counterTemplate
, which will dynamically output the number of characters left to be input to the component easily:
<p:inputTextarea value="#{bean.propertyName}" counter="display" maxlength="20" counterTemplate="{0} characters remaining" /> <h:outputText id="display" />
The counter
attribute should refer to the ID of the label component to display the remaining characters; counterTemplate
will contain the template text to display in counter
, with the default value {0}
. Either <h:outputText>
or <p:outputLabel>
can be used as the label component.
Since the maximum length constraint is being triggered by keyboard inputs, it's not possible to control the length of the input if the user right clicks to the text area canvas and pastes his own text content that will exceed the maximum length. To disable pasting, use pass through attributes of JSF 2.2, as given here:
<p:inputTextarea value="#{inputTextAreaBean.value}" counter="display2" maxlength="20" counterTemplate="{0} characters remaining"> <f:passThroughAttribute name="onpaste" value="return false;" /> </p:inputTextarea>
By defining the completeMethod
attribute, the inputTextarea
component also offers autocomplete functionality. The following definition will try to complete input queries at a minimum of 4 characters length:
<p:inputTextarea completeMethod="#{inputTextAreaBean.complete}" queryDelay="500" minQueryLength="4" cols="40" /> public List<String> complete(String query) { List<String> results = new ArrayList<String>(); if(query.equals("PrimeFaces")) { results.add("PrimeFaces Rocks!!!"); results.add("PrimeFaces has 100+ components."); results.add("PrimeFaces is lightweight."); results.add("PrimeFaces Cookbook is the best source for PrimeFaces!"); } else { for(int i = 0; i < 10; i++) { results.add(query + i); } } return results; }
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application server, such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available under http://localhost:8080/pf-cookbook/views/chapter3/inputTextArea.jsf
.