Theme
InputPhone
Input Phone

Input for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.

Features include:
  • Automatically select the user's current country using an IP lookup
  • Automatically set the input placeholder to an example number for the selected country
  • Navigate the country dropdown by typing a country's name, or using up/down keys
  • Handle phone number extensions
  • The user types their national number and the plugin gives you the full standardized international number
  • Full validation, including specific error types
  • Retina flag icons
  • Lots of initialisation options for customisation, as well as public methods for interaction

Based on International Telephone Input by Jack O'Connor.

Components and more
Documentation pe:inputPhone
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
value Value of the component.
converter An el expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
immediate When set true, process validations logic is executed at apply request values phase for this component. Default is false.
required Marks component as required.
validator A method expression referring to a method validationg the input.
valueChangeListener A method binding expression referring to a method for handling a valuchangeevent.
requiredMessage Message to display when required field validation fails.
converterMessage Message to display when conversion fails.
validatorMessage Message to display when validation fails.
accesskey Access key to transfer focus to the input element.
alt Alternate textual description of the input element.
autocomplete Controls browser autocomplete behavior.
dir Direction indication for text that does not inherit directionality.
disabled Disables the input element, default is false.
label A localized user presentable name.
lang Code describing the language used in the generated markup.
maxlength Maximum number of characters that may be entered in this field.
onblur Client side callback to execute when input element loses focus.
onchange Client side callback to execute when input element loses focus and its value has been modified since gaining focus.
onclick Client side callback to execute when input element is clicked.
ondblclick Client side callback to execute when input element is double clicked.
onfocus Client side callback to execute when input element receives focus.
onkeydown Client side callback to execute when a key is pressed down over input element.
onkeypress Client side callback to execute when a key is pressed and released over input element.
onkeyup Client side callback to execute when a key is released over input element.
onmousedown Client side callback to execute when a pointer input element is pressed down over input element.
onmousemove Client side callback to execute when a pointer input element is moved within input element.
onmouseout Client side callback to execute when a pointer input element is moved away from input element.
onmouseover Client side callback to execute when a pointer input element is moved onto input element.
onmouseup Client side callback to execute when a pointer input element is released over input element.
onselect Client side callback to execute when text within input element is selected by user.
readonly Flag indicating that this input element will prevent changes by the user.
size Number of characters used to determine the width of the input element.
style Inline style of the component.
styleClass Style class of the component.
tabindex Position of the element in the tabbing order.
title Advisory tooltip information.
placeholder The placeholder attribute specifies a short hint that describes the expected value of an input field.
widgetVar Name of the client side widget.
type Input field type. Default "tel".
inputStyle Inline style of the input element.
inputStyleClass Style class of the input element.
allowDropdown Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a country marker.
autoHideDialCode If there is just a dial code in the input: remove it on blur or submit. This is to prevent just a dial code getting submitted with the form. Requires nationalMode to be set to false.
autoPlaceholder Set the input's placeholder to an example number for the selected country, and update it if the country changes. You can specify the number type using the placeholderNumberType attribute. By default it is set to "polite", which means it will only set the placeholder if the input doesn't already have one. You can also set it to "aggressive", which will replace any existing placeholder, or "off". Loads the utils script.
excludeCountries In the dropdown, display all countries except the ones you specify here. Either a comma separated string or collection of ISO 2 country codes. Default is none.
formatOnDisplay Format the input value (according to the nationalMode option) during initialisation, and on setNumber. Loads the utils script.
initialCountry Set the initial country selection by specifying it's country code. If you leave initialCountry blank, it will default to the first country in the list. Default is "us".
nationalMode Allow users to enter national numbers (and not have to think about international dial codes). Formatting, JS validation and placeholders still work. Defaults is true.
onlyCountries In the dropdown, display only the countries you specify here. Either a comma separated string or collection of ISO 2 country codes. Default is null (so all countries).
placeholderNumberType Specify one of "fixed_line", "mobile", "toll_free", "shared_cost", "voip", "personal_number", "pager", "uan", "voicemail" or "unknown". Default is "mobile".
preferredCountries Specify the countries to appear at the top of the list. Either a comma separated string or collection of ISO 2 country codes. Default is none.
separateDialCode Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable nationalMode because technically we are dealing with international numbers, but with the dial code separated. Default false.
geoIpLookup When setting initialCountry to "auto", you must use this attribute to specify a custom function that looks up the user's location, and then calls the success callback with the relevant country code. See showcase for an example. Default null.
Events (move mouse over the names to see classes)
Name Description
countrySelectfires when a country is selected
PrimeFaces Extensions Showcase - © 2011-2019, PrimeFaces: 7.0, PrimeFaces Extensions: 7.0.1, JSF: mojarra 2.3.2, Server: jetty/9.4.2.v20170220, Build time: 2019-05-21 21:46
occured!
Message:
Timestamp:
StackTrace: