Better onChange with Dijit’s intermediateChanges

By  on  

One of the things I love about Dojo's UI framework, Dijit, is that its widgets provide loads of functionality within one property that would take a bit of Javascript jousting to create on its own.  One of those widget properties is intermediateChanges.  intermediateChanges is a boolean property of dijit.form.* widgets (TextBox, ComboBox, etc.) that fires the onChange event whenever the value of the TextBox or other form widget changes.  Not the typical onChange event which only fires when the field is blurred -- the event fires on each keystroke which changes value within the widget.

The Dojo JavaScript

The intermediateChanges property is set to false by default so you will need to enable it if you want to use it:

// Create a TextBox that fires onChange whenever the input's value truly changes
var textbox = new dijit.form.TextBox({
	// Set intermediateChanges on
	intermediateChanges: true
});

Connection to the onChange event would look like:

// When the value changes...
dojo.connect(textbox,"onChange",function(value) {
	// Now do something with the value...
	console.log("Value is: ",value);
});

// Value is: D
// Value is: Da
// Value is: Dav
// Value is: Davu
// Value is: Dav
// Value is: Davi
// Value is: David
// Value is: David_
// Value is: David_W

The console.log statement will run with each valuable keystroke or if content is dragged into the box.  intermediateChanges is especially helpful when creating or modifying a widget that should act as an autocompleter.  Keep in mind that simple onKeyUp changes can be misleading, as the value may not change (imagine simply pressing the shift key) -- that's why intermediateChanges is helpful.  Even better is that you don't have to make that keyup connection an logic yourself -- it's baked right into Dijit!

While intermediateChanges property may seem like a very small feature (and in the grand scheme of Dijit, it is), it's very helpful when you need it!  Having this functionality baked into Dojo allows you to continue developing without the hassle of creating your own onChange logic.

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Web Audio API

    The Web Audio API allows developers to load and decode audio on demand using JavaScript.  The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch.  The following is a very basic introduction to the WebAudio API...

  • By
    New York Times-Style Text Selection Widget Using MooTools or jQuery

    Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time's text selection widget. NYT's text selection widget listens for text selection and presents the user with a "search" icon...

Discussion

  1. You need a bigger screen. : P

  2. Now you just need to port this functionality to MooTools.

    http://mootools.net/docs/core/Element/Element.Event#Element-Events

  3. That’s really cool. Too bad I didn’t have that a while back. I used setInterval() to poll the textbox value while it was focused for this effect; not a very clean solution.

  4. Bill

    Your demo does not work in IE7 nor IE8, if you clear the textbox without using keystrokes (i.e. right-click the textbox that has at least one character, then select “delete”). It works fine in FF.

  5. Tas

    Ah, thanks for this! I think intermediateChanges should be true by default, just like in Flex. I do not understand why it isn’t.

  6. Ryan

    Thanks for posting this!!! For anyone else having trouble catching changes on text fields in the arcgis javascript attributeInspector, this property is the ticket!

  7. Mitesh Agrawal

    Hi,

    Using intermediateChanges solved one of my problem. But I am facing another issue. Whenever my dijit fields are getting focus onchange event is getting fired. Can you tell me where is the problem and how can we overcome it?

  8. I was banging my head for capturing the onChange when I type in the validation text box. one flag makes it all happening. That intermediateChanges should be true by default :(
    But anyhow you made my day for sure :)
    Thank you David!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!