GWT маскировка телефонных номеров - PullRequest
4 голосов
/ 07 июня 2011

Кто-нибудь знает, как создать поле, которое будет выполнять маскировку формата телефонного номера, как здесь (___) ___-____:
http://www.smartclient.com/smartgwt/showcase/#form_masking

Ответы [ 2 ]

8 голосов
/ 07 июня 2011

Лучшим подходом было бы позволить пользователю вводить то, что он хочет: «789-555-1234» или «(789) 555-1234» или «7895551234», а затем, когда поле теряет фокус, решить, может ли введенное им словобыть номером телефона.Если это так, вы можете переформатировать его как "(789) 555-1234".Есть несколько связанных вопросов о том, как делать подобные вещи с помощью регулярных выражений;просто убедитесь, что ваше регулярное выражение принимает формат, на который вы изменяете ввод пользователя, иначе это будет действительно раздражать для редактирования.

В качестве примера посмотрите, что происходит, когда вы вводите «.5» в левое полеполе в стандартном диалоговом окне настройки страницы Microsoft: когда вы вкладываете, он меняет его на «0.5».

ОБНОВЛЕНИЕ: Вот пример кода в GWT для иллюстрации.В этом примере предположим, что есть элемент с именем phoneContainer для помещения текстового поля. GWT не дает вам полный пакет java.util.regex, но этого достаточно для этого:

private void reformatPhone(TextBox phoneField) {
    String text = phoneField.getText();
    text = text.replaceAll("\\D+", "");
    if (text.length() == 10) {
        phoneField.setText("(" + text.substring(0, 3) + ") " + text.substring(3, 6) + "-" + text.substring(6, 10));
    }
}


public void onModuleLoad() {
    final TextBox phoneField = new TextBox();

    RootPanel.get("phoneContainer").add(phoneField);
    phoneField.addBlurHandler(new BlurHandler(){
        public void onBlur(BlurEvent event) {
            reformatPhone(phoneField);
        }
    });
}
1 голос
/ 07 июня 2011

Похоже, вы захотите создать свой собственный виджет, который расширяет поле ввода GWT и имеет значение по умолчанию, установленное на желаемую маску. Затем вы обрабатываете событие onKeypress и обновляете поле по мере необходимости (обязательно устанавливая положение курсора в правильное положение).

...