Input and Checkbox Handlers

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

CheckboxHandler is derived from InputHandler and added

Elements

InputHandlers can be used with a single element

BuildInputListener().listen(“#my-input”)

or all elements matching a selector

BuildInputListener().selector(“input.some-class”)

or to a group of elements with a common ancestor

BuildInputListener().listen(“#form-element”).selector(“input.some-class]”)

The element firing an event is passed in the target parameter of the callback.

Callbacks

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).

event is the javascript Event being handled.

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.

BuildInputListener()

                .listen(“#my-input”)

                .onInput(myInputValueChanged)

                .onChange(saveMyInputValue)

                .build();

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.

BuildCheckboxListener()

                .listen(“#my-input”)

                .onChecked(myInputChecked)

                .onUnchecked(myInputUnchecked)

                .onInput(myInputChanged)

                .onChange(saveMyInputValue)

                .build();

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.]

BuildInputListener()

                .listen(“#my-input”)

                .onFocus(myInputGotFocus)

                .onBlur(myInputLostFocus)

                .onInput(myInputChanged)

                .onChange(saveMyInputValue)

                .build();

FocusIn & FocusOut

I forget about these 2 events if I go 6 months without writing javascript. And even when I remember them I don’t usually use them. But sometimes there’s a need to do something when an input in a container element gets or loses focus. That’s what these events are for.

BuildInputListener()

                .listen(“#my-form”)

                .debounce()

                .onFocusIn(myFormGotFocus)

                .onFocusOut(myFormLostFocus)

              .build();

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.

Keys

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.

BuildInputListener()

                .listen(“#my-input”)

                .onInput(myInputValueChanged)

                .onChange(saveMyInputValue)

                .onEnter(submitForm)

                .onEscape(cancelForm)

                .onKey(handleKeyPress)

                .build();

The onKey callback has an additional argument. The key is passed as the first parameter

function callback(key,value, target, event, handler)

ToDo

Implement copy/paste functionality.

focusIn and focusOut do not work if a selector() is specified.

Summary

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.

Tagged