Fotiman
msg:4523020 | 8:34 pm on Nov 27, 2012 (gmt 0) |
Seems to be working in the fiddle you provided... can you elaborate? What isn't it doing that you think it should be?
|
Rain_Lover
msg:4523026 | 9:00 pm on Nov 27, 2012 (gmt 0) |
The iframe content is supposed to get updated in real time, as soon as the textarea content changes.
|
Fotiman
msg:4523036 | 9:20 pm on Nov 27, 2012 (gmt 0) |
That's exactly what I see. Tried it in Chrome, Firefox, and IE9.
|
Rain_Lover
msg:4523126 | 7:53 am on Nov 28, 2012 (gmt 0) |
| That's exactly what I see. |
|
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 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. Something like this:
function displayResult() {
if (textarea.value != textarea.value.10ms.ago) {
iframe.open();
iframe.write(textarea.value);
iframe.close();
}
window.setTimeout(displayResult, 10);
}
|
Fotiman
msg:4523193 | 1:59 pm on Nov 28, 2012 (gmt 0) |
Ah, ok. That's because:
if (textarea.value)
If you delete the entire value, then this test will be false, and therefore the iframe will not be updated. Just remove the "if" condition.
|
Rain_Lover
msg:4523267 | 4:16 pm on Nov 28, 2012 (gmt 0) |
Now it works properly. But if I remove the if clause, the iframe gets updated every 10ms, no matter if there's a change in the textarea content or not. It is not necessary and CPU-friendly. The question is how can I set it to update the iframe only if there is a change in the textarea content?
|
Fotiman
msg:4523331 | 7:40 pm on Nov 28, 2012 (gmt 0) |
Note, even if you have that if clause, it will still update every 10ms as long as the textarea has a value that is truthy (resolves to "true" when used as a boolean).
Instead, what you want to do is store the "last known value" of the textarea, and then test to see if the value is different. For example:
var lastValue = '';
function displayResult() {
if (textarea.value !== lastValue) {
lastValue = textarea.value;
iframe.open();
iframe.write(textarea.value);
iframe.close();
}
window.setTimeout(displayResult, 10);
}
|
|
|
Rain_Lover
msg:4523469 | 6:19 am on Nov 29, 2012 (gmt 0) |
Perfect! Thanks! :)
|
|
