Workflow Short – oninput Event

As I don’t have a lot of experience with Javascript outside of Workflow, I was, prior to yesterday, unfamiliar with the “oninput” function.  As it turns out, it’s a bit better for most of the value validations than what I was using previously (onchange).  Here’s a quick rundown on how to make use of this feature.

oninput

Much like the method for adding the “placeholder” attribute, and similar to the onchange event, we’re going to need to use javascript to add the “oninput” event attribute to an element on body onload.

Here’s a snippet from a login form I’m working on (code found in body – onload).


// declarations
var logfield = document.getElementById('LoginField');
var pwfield = document.getElementById('PasswordField');

//create and value placeholder and oninput attributes for textboxes
logfield.setAttribute('placeholder','Login Name/Email');
logfield.setAttribute('oninput','inputBoxRequired("LoginField")');
pwfield.setAttribute('placeholder','Password');
pwfield.setAttribute('oninput','inputBoxRequired("PasswordField")');

Where the second value in the setAttribute function is the function we want to run “oninput”.  This function is placed in the “Script” section in the form editor.

Here’s my function, for reference:


function inputBoxRequired(compID) {
var checkElem = document.getElementById(compID);
if (checkElem.value == '') {
checkElem.className = 'gaInputBoxRequired';
}
else {
checkElem.className = 'gaInputBox aInputValid';
}
}

The fundamental difference between “onchange” and “oninput” is that “onchange” fires when an element loses focus.  “oninput” fires whenever the element receives input, which means this works for pasting values in as well, even if pasting using the right-click context menu.  There are some caveats, which can be found at the link below.


Further Reading

Javascript oninput Event

2 thoughts on “Workflow Short – oninput Event

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s