[thelist] JAVASCRIPT: realtime update of input fields in a form

Wed Jul 3 15:40:00 CDT 2002

--- "Chris W. Parker" <cparker at swatgear.com> wrote:
> > -----Original Message-----
> > From: Ismail KIRTILLI [mailto:listeler at ismailk.net]
> >
> > one thing I have discovered with the curent script is that it
> doesn't
> > automatically refresh the preview part when you make a change
> > with pre-changed
> > part.
> >
> > For example, you write something bold, then you wanted to
> > change it italic.
> > Simply it doesn't refresh the field, it just prints the newly
> > additions.
> >
> > did you realize that?
>
> what i've encountered is that the "preview" is not updated until
> you add
> a character or change a character. for example if you paste a
> string
> into the input box, the preview will not be displayed until you add
> a
> character, or at the least press the space bar.
>
> that could be what tom was talking about when he said...
>
> <snip>
> Now, the setTimeout probably is not a good idea - I think if you
> change it to setInterval (and assign it to a variable) you will be
> using the correct method. Have it check at intervals of a couple
> seconds or whatever you want, and when the page submits clear the
> interval for clean up.
> </snip>
>
> but i'm not sure but i'll have to figure out what he means later
> since
> i've just been playing around with the current implementation of
> it.
>
>
> chris.

Guys,

I've included my file that I was playing around with, Chris you are
right, you need to use the setinterval() method. This checks the
script at INTERVALS, not waiting for the timeout on the event. It
will work with a pasted string, no problem. I ran out of time playing
with it but this version is where its at, I'll probably work it out
some more and post it somewhere if anyone is interested.

Tom
----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>CMS Preview Viewer</title>
<script>
window.onLoad = startPreview();

function startPreview()
{
	window.self.setInterval("updatePreview()", 200);
}

function updatePreview()
{
	newContent = document.getElementById("entryText").value;
	document.getElementById("preview").innerHTML = newContent;
}

function addHTML(tag) {
	strSelection = document.selection.createRange().text;
	if (strSelection == "")
	{
		alert("Please select some text first.");
	}
	else
	{
		document.selection.createRange().text = "<"+tag+">" +  strSelection
+ "</"+tag+">";
	}
	return;
}

function storeCaret (tag) {
	if (tag.createTextRange) {
	tag.caretPos = document.selection.createRange().duplicate();
	}
}

function insertAtCaret (tag, text) {
	if (tag.createTextRange && tag.caretPos){
		var caretPos = tag.caretPos;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '
' ? text + ' ' : text;
	}
	else
	tag.value  = text;
}
</script>
<style type="text/css" rel="stylesheet">
INPUT
{
	background-color: #a9a9a9;
	color: #000000;
	font-family: tahoma, arial, sans-serif;
	font-weight: 800;
	font-size: 75%;
}

BODY
{
	font-family: tahoma, arial, sans-serif;
	font-size: 80%;
}
</style>
</head>

<body>

<table width="100%" border="1" cellpadding="5" cellspacing="0"
bordercolor="#a9a9a9">
<tr>
	<td colspan="2" align="center">CMS JavaScript Previewer</td>
</tr>

<tr valign="top"><form name="previewer">
	<td width="50%">
	<div><span>Text Modifiers:</span>
	<input type="button" value="P" onclick="addHTML('p')">
	<input type="button" value="B" onclick="addHTML('b')">
	<input type="button" value="I" onclick="addHTML('i')">
	<input type="button" value="U" onclick="addHTML('u')">
	<input type="button" value="Br"
onclick="insertAtCaret(this.form.entryText,'<br />');"></div>
	<textarea rows="25" id="entryText" style="width: 100%;"
onSelect="storeCaret(this);" onClick="storeCaret(this);"
onKeyUp="storeCaret(this);" wrap="virtual"></textarea></td>
	<td width="50%">
	<div><span>Preview:</span></div>
	<div id="preview" style="width: 100%; height: auto; padding:
4px;"></div></td>
</tr></form>
</table>
</body>
</html>

=====
var me = tom.pixelmech.webDeveloper();
http://www.pixelmech.com/

__________________________________________________
Do You Yahoo!?
Sign up for SBC Yahoo! Dial - First Month Free
http://sbc.yahoo.com