Skip to content

WPhoneNumberField

Jump to bottom
Mark Reeves edited this page Jan 3, 2018 · 12 revisions

WPhoneNumberField is a component for creating an input field with specific input type for telephone numbers.

For further information see WTextField; the remainder of this document is concerned with differences between WPhoneNumberField and WTextField.

Why use WPhoneNumberField

WPhoneNumberField should be used whenever user input of a telephone number is required as it will provide users with soft keyboards the ability to use a phone number keyboard. When in the read-only state WPhoneNumberField will output a link which can invoke a soft phone if available or dial a mobile phone if allowed by the user.

Accessibility

WPhoneNumberField enhances accessibility by providing phone number enhanced input where possible.

See accessibility notes of WTextField as they all apply to WPhoneNumberField.

Appearance

The appearance of the WPhoneNumberField is dependent on the user agent. The illustrations in this document were all created using Google Chrome on OS X.

  • a WPhoneNumberField with no input

    A typical WPhoneNumberField with no input

  • a WPhoneNumberField with user input

    A typical WPhoneNumberField with user input

  • a WPhoneNumberField with content in a read-only state

    A typical WPhoneNumberField in a readOnly state

HTML output

A WPhoneNumberField (when not in a read-only state) will output a wrapping a HTML input element in the telephone state. This is an interactive, form bound control and therefore may not be used in any context where the content model forbids this content category. At the moment there is no validation or customisation of input for WPhoneNumberField compared with WTextField.

If in a read-only state the output will be a HTML a element containing the text value of the component as a tel: protocol link (see RFC3966).

Read only

See WTextField. When in the readOnly state WPhoneNumberField will output a HTML a element which can invoke a soft phone if available or dial a mobile phone if allowed by the user.

  • a WPhoneNumberField with content in a read-only state

    A typical WPhoneNumberField in a readOnly state

Input pattern

WPhoneNumberField supports setting an input pattern. It is strongly recommended that one does not attempt to set a pattern for phone number unless one has a limited (and non-international) audience for the application. Telephone number RegExps are not particularly complex but the lack of back-lookups in JavaScript regexs makes them mostly unworkable.

Testing

WPhoneNumberField may be tested using the com.github.bordertech.wcomponents.test.selenium.element.SeleniumWPhoneNumberFieldWebElement extension of org.openqa.selenium.WebElement.

The best way to get a WEmailField from a test view is by using SeleniumWComponentsWebDriver which has a method findWPhoneNumberField(By). This can be used in conjunction with com.github.bordertech.wcomponents.test.selenium.ByLabel, for example, to find a WPhoneNumberField using its label's text.

@Test
public void testFindByLabel() {
  SeleniumWComponentsWebDriver driver = getDriver();
  String labelText = "Phone";
  SeleniumWPhoneNumberFieldWebElement field =
    driver.findWPhoneNumberField(new ByLabel(labelText, false));
  Assert.assertNotNull("Unable to find phone number field by label text",
    field);
}

For more information on members provided by SeleniumWWPhoneNumberFieldWebElement see:

Related components

Further information

Some start pages

Clone this wiki locally