Question

我正在尝试将输入限制为GWT TextInputCell，用于货币值，日期，SSN等等。我想限制他们可以使用正则表达式（理想情况下）键入字段的字符。我猜这样做的唯一方法是覆盖TextInputCell上的onBrowserEvent方法，但我无法让它工作。

屏蔽输入单元格的最佳方法是什么？

Answer 1

onBrowserEvent方法会收到NativeEvent，其中有preventDefault方法。您可能希望在本机事件上的preventDefault返回您要阻止的字符时调用getKeyCode方法。

另请参阅KeyCodes类，它可以方便地测试特殊键。

Answer 2

所以这是我的解决方案（基于David的好反馈）：

首先，TextInputCell存在一个限制，它无法处理本机keypress事件，所以我必须创建一个近乎完全的类副本并添加keypress事件类型它传递给单元格可以处理超级构造函数的事件类型的构造函数。我们称这个班为KeyPressableTextInputCell。请参阅此讨论此解决方案的主题：Why isn't the keypress event being sent to GWT's TextInputCell.onBrowserEvent() method?

然后，我创建了一个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]*$"));
    }
}

如何在GWT中将输入限制为TextInputCell？

2 个答案: