Question

I am building a GWT component to behave much like the comments box here on stackoverflow, and other sites. I am trying to register listeners for KeyPress, Change and ONPASTE events that will update my status line with number of characters remaining, etc.

It works except it is always one character behind the actual number of characters in the text area. I set the max number of characters to 10. When I type the first character it still says, “10 characters remaining”. It doesn’t update the status line until I type the second character and then it is one off, it says 9 characters remaining when the second character is typed.

When I BACKSPACE or DELETE, it is also one off, when there are no characters it still says “9 characters remaining” until I press the BACKSPACE or DELETE a second time.

I am getting this behavior in both Firefox, Chrome and Internet Explorer on Windows. So I think I am not registering something correctly.

I know this has something to do with when the events are getting fired, but I have spend hours on trying to diagnose this behavior and have run out of ideas.

Here is where I am registering the event handlers, the complete code is BoundedTextAreaWithFeedback.

private void registerHandlers()
{
    final BoundedTextAreaWithFeedback outer = this;
    this.textArea.addChangeHandler(new ChangeHandler()
    {
        public void onChange(final ChangeEvent changeEvent)
        {
            outer.validate();
        }
    });
    this.textArea.addKeyPressHandler(new KeyPressHandler()
    {
        public void onKeyPress(final KeyPressEvent keyPressEvent)
        {
            outer.validate();
        }
    });
    this.panel.addFocusHandler(new FocusHandler()
    {
        public void onFocus(final FocusEvent focusEvent)
        {
            outer.textArea.setFocus(true);
        }
    });

    // capture paste events
    this.textArea.sinkEvents(Event.ONPASTE);
}

Here is the validate() method.

private boolean validate()
{
    final boolean isValid;
    final int len = this.textArea.getText().length();
    if (len < this.minLength)
    {
        this.status.setText("Enter at least " + this.minLength + " characters.");
        this.status.setStyleName("input-status-underflow");
        isValid = false;
    }
    else if (len > this.maxLength)
    {
        this.status.setText(this.maxLength - len + " characters remaining");
        this.status.setStyleName("input-status-overflow");
        isValid = false;
    }
    else
    {
        this.status.setText(this.maxLength - len + " characters remaining");
        this.status.setStyleName("input-status-ok");
        isValid = true;
    }
    return isValid;
}

Answer 1

I just started adding every addXXXHandler() until one worked.

this.textArea.addKeyUpHandler(new KeyUpHandler()
{
    public void onKeyUp(final KeyUpEvent event)
    {
        outer.validate();
    }
});

Seems to have done the trick.

Here is the working code, CTRL-V and paste from context menu also work now.