GWT 电话号码掩码答案

【问题标题】：GWT telephone number maskingGWT 电话号码掩码
【发布时间】：2011-06-06 20:31:46
【问题描述】：

有谁知道如何创建可以执行电话号码格式屏蔽的字段，例如这里(___) ___-____:
http://www.smartclient.com/smartgwt/showcase/#form_masking

【问题讨论】：

这种格式只在美国有效，不能处理国际号码。你确定，你想要那个？
从你链接到的那个演示来看，我不想填写这样的表格。我不是 UX 专家，但我确信有比绿屏/终端更好的方法，比如遮罩。
这些是一些非常酷的基于 jQuery 的示例：catswhocode.com/blog/…
查看这个特定的演示：position-relative.net/creation/formValidator/demos/…

【解决方案1】：

更好的方法是让用户输入他们想要的任何内容：“789-555-1234”或“(789) 555-1234”或“7895551234”，然后当字段失去焦点时决定他们输入的内容是否可以是一个电话号码。如果是这样，您可以将其重新格式化为“(789) 555-1234”。关于如何用正则表达式做这类事情有几个相关的问题；只需确保您的正则表达式接受您将用户输入更改为的格式，否则编辑会很烦人。

举个例子，看看当你在微软标准页面设置对话框的左边距字段中输入“.5”时会发生什么：当你把它改成“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);
        }
    });
}

【讨论】：

【解决方案2】：

您似乎想要创建自己的小部件，以扩展 GWT 输入框并将默认值设置为您想要的掩码。然后处理 onKeypress 事件并根据需要更新字段（确保将光标位置设置到正确的位置）。

【讨论】：