How can I restrict input to TextInputCell in GWT?

Question

I am trying to restrict input to the GWT TextInputCell for things like monetary values, dates, SSN, etc. I would like to limit the character that they can enter into the field using a regular expression (ideally). I assume the only way to do this is to override the onBrowserEvent method in TextInputCell, but I could not get it to work.

What is the best way to mask input cells?

Answer 1

The method onBrowserEventreceives a NativeEvent , which has a method preventDefault. You probably want to call this method preventDefaultwhenever getKeyCodeyou return the character you want to block in your own event.

. KeyCodes, .

Answer 2

, ( ):

-, TextInputCell , keypress, keypress , , -. KeyPressableTextInputCell. . , : TextInputCell.onBrowserEvent() GWT?

MaskedTextInputCell, onBrowserEvent() , . , 0-9 . . , ValidationStrategy MaskedTextInputCell.

public class MaskedTextInputCell extends KeyPressableTextInputCell {
    public interface ValidationStrategy {
        public boolean matches(String valueToCheck);
    }

    private ValidationStrategy overallFormValidationStrategy;
    private ValidationStrategy validKeystrokeValidationStrategy;

    public MaskedTextInputCell(ValidationStrategy overallFormValidationStrategy,
            ValidationStrategy validKeystrokeValidationStrategy) {
        this.overallFormValidationStrategy = overallFormValidationStrategy;
        this.validKeystrokeValidationStrategy = validKeystrokeValidationStrategy;
    }

    @Override
    public void onBrowserEvent(Element parent, String value, Object key, NativeEvent event,
            ValueUpdater<String> valueUpdater) {
        super.onBrowserEvent(parent, value, key, event, valueUpdater);

        if ("keypress".equals(event.getType())) {
            String keystroke = String.valueOf((char) event.getCharCode());
            handleInvalidKeystroke(keystroke, event);
        } else if ("blur".equals(event.getType()) || "keyup".equals(event.getType())) {
            String valueInInputElement = getInputElement(parent).getValue();
            handleInvalidOverallForm(valueInInputElement);
        }
    }
    protected void handleInvalidOverallForm(String valueOfEntireField) {
        if (!overallFormValidationStrategy.matches(valueOfEntireField)) {
            //You could fire an event here to turn the cell red...
            GWT.log("Invalid form.");
        }
    }
    protected void handleInvalidKeystroke(String keystroke, NativeEvent event) {
        if (!validKeystrokeValidationStrategy.matches(keystroke)) {
            GWT.log("Invalid keystroke.");
            event.preventDefault();
        }
    }
}

ValidationStrategy :

public class RegularExpressionValidationStrategy implements MaskedTextInputCell.ValidationStrategy {
    private String regularExpression;
    public RegularExpressionValidationStrategy(String regularExpression) {
        this.regularExpression = regularExpression;
    }
    @Override
    public boolean matches(String valueToCheck) {
        return valueToCheck.matches(regularExpression);
    }
}

- , :

public class MonetaryTextInputCell extends MaskedTextInputCell {
    public MonetaryTextInputCell() {
        super(new RegularExpressionValidationStrategy("[0-9.]"), 
              new RegularExpressionValidationStrategy("^[0-9.][0-9]*[0-9.]?[0-9]*$"));
    }
}