Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript
I wonder why the following sample code doesn't work properly:
 
<!DOCTYPE html>
<html>
 
    <head>
        <title></title>
        <style type="text/css">
            textarea, iframe {
                display:block;
                width:300px;
                height:100px;
                margin:3px;
                padding:3px;
                border:1px solid #CCC;
            }
        </style>
    </head>
 
    <body>
        <textarea id="field" onfocus="getFocus();" onblur="loseFocus();">This is some text.</textarea>
        <iframe name="target"></iframe>
        <script>
            var textarea = document.getElementById('field');
            var iframe = window.target.document;
 
            function displayResult() {
                if (textarea.value) {
                    iframe.open();
                    iframe.write(textarea.value);
                    iframe.close();
                }
                window.setTimeout(displayResult, 10);
            }
 
            function getFocus() {
                if (textarea.value == textarea.defaultValue) {
                    textarea.value = '';
                }
            }
 
            function loseFocus() {
                if (textarea.value == '') {
                    textarea.value = textarea.defaultValue;
                }
            }
            displayResult();
        </script>
    </body>
 
</html>
 
Demo: http://jsfiddle.net/RainLover/4ksMR/
 
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.
Posted 27-Nov-12 10:28am
Edited 27-Nov-12 22:35pm
v2
Comments
ryanb31 at 27-Nov-12 15:39pm
   
What doesn't work right about it?
RainLover at 28-Nov-12 3:41am
   
Just updated my question for clarification.
ryanb31 at 28-Nov-12 7:50am
   
But it worked fine for me. I still don't see what the issue is.
RainLover at 28-Nov-12 11:07am
   
Please let me provide two examples:
1. Enter a sentence/code into the text field. Then select/highlight it. Now press the 'Delete' button on your keyboard. You won't see the same change on the iframe unless the textarea loses focus.
2. Enter a sentence and then delete all the letters using the 'backspace' key. You'll see the last letter remains in the iframe.
As I said 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. Something like this:
 
function displayResult() {
if (textarea.value != textarea.value.10ms.ago) {
iframe.open();
iframe.write(textarea.value);
iframe.close();
}
window.setTimeout(displayResult, 10);
}
ryanb31 at 28-Nov-12 11:14am
   
Have you tried the onchange event?
RainLover at 28-Nov-12 11:40am
   
The onchange event only works when the text field loses focus.
ryanb31 at 28-Nov-12 11:45am
   
try the onkeydown event. http://www.w3schools.com/tags/ref_eventattributes.asp
RainLover at 28-Nov-12 11:46am
   
It doesn't cover the changes made by mouse.
ryanb31 at 28-Nov-12 11:53am
   
Yes, but if you refer to that url, there are other events, including mouse events. Depending on how complicated your form is, it may just be easier to have it always running. Also, you could probably set your timeout value to 100 and still have a good user experience but then it is running 10 times less often if you had it continually looping.
mark merrens at 27-Nov-12 18:50pm
   
I wonder why you wonder why?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 345
1 OriginalGriff 210
2 DamithSL 210
3 Kornfeld Eliyahu Peter 210
4 Peter Leow 95
0 OriginalGriff 7,215
1 DamithSL 5,199
2 Maciej Los 4,866
3 Sergey Alexandrovich Kryukov 4,757
4 Kornfeld Eliyahu Peter 4,514


Advertise | Privacy | Mobile
Web01 | 2.8.141223.1 | Last Updated 28 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100