pasting into text mask fields

Smart GWT Technical Q&A
1

From the SmartGWT-Showcase/Forms/Text-Masking demo as a reference: If you paste (using CTRL+V) into any of the text fields, the masking mechanism yields a poor user experience. This is especially apparent for the “Phone No.” field as the masking template gets pushed beyond the end of the string that is pasted. While in some circumstances the field is left with valid data, in others it’s not. Overall, the user experience is such that uesrs end up basically typing what they intended to cut/copy/paste into the field.

Without having looked deeply into the underlying code that performs the text masking mechanism, is it something that can be easily fixed or worth of filing a bug?

Thanks in advance.

2

The solution is not simple. This is a known issue but you might as well post it as a bug.

3

The idea is to add a KeyUpHander on the field, then basically strip any mask info that the user thinks they need to paste into the field. Putting the raw value into the field makes the mask code happy again.

For instance, if the mask was (###) ###-#### a typical user would try to copy a number that looked like this. When the mask gets applied, the non-numeric values that were pasted in cause characters to get lost and the result would be absolutely wrong. But if the KeyUp handler then processes what they pasted and removes all but the numbers, then the mask knows what to do with it and all is well.

addKeyUpHandler(new KeyUpHandler() {
    @Override
    public void onKeyUp(KeyUpEvent event) {
 	TextItem textItem = (TextItem)event.getItem();
        String value = textItem.getEnteredValue();
	textItem.setValue(FormUtil.formatPhoneNumber(value));
    }
});

...
public static String formatPhoneNumber(String phoneNumber) {
    if (isNumber(phoneNumber) && phoneNumber.length() == 10) {
    	return phoneNumber;
    } else {
    	String formattedNumber = "";
    	if (phoneNumber.toLowerCase().contains("x")) {
    		formattedNumber = phoneNumber.toLowerCase().split("x")[0].trim().replaceAll(" ", "");
  	} else {
    		formattedNumber = phoneNumber.trim().replaceAll(" ", "");
    	}
        if (formattedNumber.startsWith("1-")) {
        	formattedNumber = formattedNumber.substring(2);
        }
        formattedNumber = formattedNumber.replaceAll("-", "").replaceAll("\\(", "").replaceAll("\\)", "").replaceAll("\\.", "");
        return formattedNumber;
    }
}

public static boolean isNumber(String x) {
    if(x == null) return false;
    if(x.length() == 0) return false;
    for(int i = 0; i < x.length(); i++) {
       if(!Character.isDigit(x.charAt(i))) return false;
    }
    return true;
}

We had special needs/assumptions about what phone number formats we would support, but you should get the idea from this example.