I described the basics of my latest event handlers in another post.
Inputs are a critical part of most web apps and the first handler I created. This post describes how input event handlers work in my latest fun/learning/experiment project.
InputHandler is an EventHandler intended to listen for events on <input>, <select> and <textarea> elements. It supports application callbacks for the events I commonly want to handle with an input element:
It also supports events I use less often but still associate with input
- enter (enter key pressed)
- escape (escape key pressed)
- key (any key pressed)
CheckboxHandler is derived from InputHandler and added
InputHandlers can be used with a single element
or all elements matching a selector
or to a group of elements with a common ancestor
The element firing an event is passed in the target parameter of the callback.
In the simplest case, all Input callback functions receive 4 parameters
function callback(value, target, event, handler)
value is the HTML value of the input, select, or text area. With CheckboxHandler, the value is a boolean: true or false.
target is the element that fired the event (input, select, or textarea).
handler is the EventHandler created by BuildInputHandler()…build();
If setData() was used to specify additional data for the event handler, it is included as the first argument
function callback(data, value, target, event, handler)
data may be null if the setData() function returns null.
Input & Change Events
Input events fire any time a user action changes the input’s value.
Change events fire when the element loses focus after the value changes.
[There are a few other details like pressing enter may fire a change. ]
An input handler can listen to one or both of these. You may do something like this to fill auto-complete options any time the user changes the value (with myInputValueChange()) and to save the value when the element loses focus.
onInput() and onChange() can be used with checkboxes, but there are additional callbacks for when the element changes to checked and when it changes to unchecked.
There is generally no need to handle input and change events with a checkbox.
onChecked and onUnchecked callbacks differ from other input callbacks in that the value is not passed
function callback(target, event, handler)
If you set both callbacks to the same function, you can get the state of the checkbox from the target parameter.
Focus & Blur
These two events do what they say. The same handler for input & change can be used for focus and blur.
[that is not necessary. you can use 2, 3, or 4 InputHandlers or only handle focus and not provide callbacks for others.]
FocusIn & FocusOut
When the user changes focus to another input under the same parent, the parent receives a focusOut on the first element immediately followed by focusIn on the next. This may be desired but a debounce() can be useful to prevent the focusOut. You will only receive focusOut when all inputs in the form lose focus.
It’s common to do something when the user presses enter or escape. These can easily be handled with a separate KeyHandler, but using the InputHandler makes it simple to use the same listen() element, selector(), and setData() and can avoid maintenance mistakes. As long as I was handling keypress for escape and enter, I added a generic key callback. KeyHandler is much more powerful for handling keys, but InputHandler.onKey will take care of many things.
The onKey callback has an additional argument. The key is passed as the first parameter
function callback(key,value, target, event, handler)
Implement copy/paste functionality.
focusIn and focusOut do not work if a selector() is specified.
The project I wrote this for has very little text input so it’s hard to get a good idea of how it is to use for that. I do use many checkboxes and am very happy with the functionality there. I have individual checkboxes, groups of checkboxes, and trees of checkboxes and it’s easy to handle state and change in all cases. I even have a tree of 3-state inputs built with checkbox inputs and it works well.