I'm trying to implement a kind of "guided typing" widget for data entry, in which the user's text entry is highly controlled and filtered. When the user types a particular character I need to intercept and filter it before displaying it in the widget. Imagine if you will, a Unix shell embedded as a webapp; that's the kind of thing I'm trying to implement. I've tried two approaches.
In the firs开发者_运维技巧t, I extend a TextArea
, and add a KeyPressHandler
to filter the characters. This works, but the browser-provided spelling correction is totally inappropriate, and I don't see how to turn it off. I've tried:
DOM.setElementProperty(textArea.getElement(), "spellcheck", "false");
But that seems to have no effect- I still get the red underlines over "typos".
In the second approach I use a FocusWidget
to get KeyPress events, and a separate Label
or HTML
widget to present the filtered characters back to the user. This avoids the spelling correction issue, but since the FocusWidget
is not a TextArea
, the browser tends to intercept certain typed characters for internal use; e.g. FireFox will use the "/" character to begin a "Quick Find" on the page, and hitting Backspace will load the previous web page.
Is there a better way to accomplish what I'm trying to do?
You might just be able to use event.preventDefault()
on your keypress events to avoid these browser behaviors. Otherwise, maybe a hybrid of the two approaches? Have a hidden TextArea
with focus, accepting key events, and then post the typed characters to a separate Label
.
There is no specific GWT method on TextBox for this, but this simple line of GWT code fixes the problem for Chrome (for other browsers, YMMV - it may depend upon how completely they implement HTML5) by setting an attribute on the underlying input element:
myTextBox.getElement().setAttribute("spellCheck", "false");
Perhaps this attribute is a relatively new feature.
精彩评论