setTimeout to detect changes in a text field

I wonder why the following sample code doesn’t work properly:

<!DOCTYPE html>

        <style type="text/css">
            textarea, iframe {
                border:1px solid #CCC;

        <textarea id="field" onfocus="getFocus();" onblur="loseFocus();">This is some text.</textarea>
        <iframe name="target"></iframe>
            var textarea = document.getElementById('field');
            var iframe =;

            function displayResult() {
                if (textarea.value) {
                window.setTimeout(displayResult, 10);

            function getFocus() {
                if (textarea.value == textarea.defaultValue) {
                    textarea.value = '';

            function loseFocus() {
                if (textarea.value == '') {
                    textarea.value = textarea.defaultValue;




You need to pass a function to setTimeOut.

In other words, change this:

window.setTimeout(displayResult, 10);

to this:

window.setTimeout(function(){displayResult()}, 10);

and things will work as expected.

Both of those code samples are passing a function to setTimeout - just the one the OP is using is shorter than your replacement as it calls the function directly instead of ccalling an anonymous function that then calls the function.

I can’t see exactly where the problem is but suspect it probably relates to the iframe part of the code.

The OP seems to have the demo working now if you look at the Fiddle.
I can’t work out what’s different though.

The iframe content is supposed to get updated in real time – as soon as the textarea content changes by keyboard or mouse. This approach is an alternative to the oninput event. But since oninput isn’t well-supported across different browsers I decided to create a timer to compare the current text field value with its value in 10 milliseconds before.