Menu
Community /Pin to ProfileBookmark
@Rain_LoverNov 28.2012 — #
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 [I]oninput[/I] event. But since [I]oninput[/I] 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.@Rain_LoverNov 28.2012 — #
Thanks for the answer, but it doesn't cover IE9, which is a major browser. The oninput even is buggy in IE9:http://help.dottoro.com/ljhxklln.php
setTimeout to detect changes in a text field
I wonder why the following sample code doesn’t work properly:
[CODE]<!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: [URL=”http://jsfiddle.net/RainLover/4ksMR/”]http://jsfiddle.net/RainLover/4ksMR/
Sign in
to post a comment5 Comments(s) ↴
0
@Rain_LoverNov 28.2012 — #Maybe because you're opening, writing to and closing the iframe 100 times per second (which seems more frequent than necessary)? However, the code does work for me just as it is in both Chrome and Firefox - when the textarea isn't empty it's value is copied and written to the iframe document.[/QUOTE]
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 [I]oninput[/I] event. But since [I]oninput[/I] 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.
0
@Rain_LoverNov 28.2012 — #Hi bud
If you use onpropertychange for ie and oninput for everyone else you should cover most browsers
Here is an example for you:
<i>
</i><html>
<head>
<style type="text/css">
textarea{
width:300px;
height:100px;
border:1px solid #CCC;
}
</style>
<script type="text/javascript">
function addtxt(txt){
document.getElementById("res").innerHTML=txt
}
</script>
<title>Colour run</title>
</head>
<body>
<textarea id="txtarea" onpropertychange="addtxt(this.value)" oninput="addtxt(this.value)"></textarea>
<div id="res"></div>
</body>
</html>
I checked it out in ie firefox and opera and it works ok, it should work in chrome as well[/QUOTE]
Thanks for the answer, but it doesn't cover IE9, which is a major browser. The oninput even is buggy in IE9: