Dynamically Updating Text and its Color

For a current project, I’m putting together a form that among other things, allows people to input text and change the color of it, previewing their changes on the fly. It’s some basic javascript that updates the CSS and content. I thought I might share that one part of the form.

Let’s start without color-switching

Take color-switching out of the equation and just get content updates working first. I use this html:

<p>
<input
	type="text"
	id="inputText"
	name="inputText"
	value="Sample Text to Type" />
</p>
<p id="previewer" style="color:#000000;">
	Sample Text to Type
</p>

I have a basic text input to which I put the id inputText. I then put a paragraph beneath it with the id previewer. I need to use id’s as a way for the javascript to help identify these elements. Because I always want the input value to be the same as the paragraph text, I went ahead and put some filler text “Sampel Text to Type” in both places.

In English

I want to take whatever value is being typed into input#inputText, and insert it into the p#previewer.

The Javascript

function updatePreview() {
  var previewer = document.getElementById('previewer');
  var inputtxt = document.getElementById('inputText');
  previewer.firstChild.nodeValue=inputtxt.value;
}
 
function setText() {
  var inputtxt = document.getElementById("inputText");
  inputtxt.onkeyup = function() {
  	updatePreview();
  }
}
addLoadEvent(setText);

I’ll mention the second function first. “setText” finds the element with the id inputText and says “when someone lifts the key from they keyboard, update the paragraph (using ‘updatePreview’)”.

The “updatePreview” function takes whatever the value is on the input field, and inserts right after the opening <p> tag of id previewer.

The addLoadEvent statement makes this stuff happen when the page loads, and uses the addLoadEvent function, which I won’t cover here, but it is found in my example page.

Now change the color

Here’s the html:

<span id="colorselections"> 
  <a href="#" style="background-color:#000000;" class="on">
    <img src="space.gif" class="colorbox" alt="Black" />
  </a>
  <a href="#" style="background-color:#003399;" class="">
    <img src="space.gif" class="colorbox" alt="Light Blue" />
  </a>
  <a href="#" style="background-color:#5E5E5E;" class="">
    <img src="space.gif" class="colorbox" alt="Medium Gray" />
  </a>
  <a href="#" style="background-color:#00524E;" class="">
    <img src="space.gif" class="colorbox" alt="Dark Teal" />
  </a>
  <a href="#" style="background-color:#258B86;" class="">
    <img src="space.gif" class="colorbox" alt="Light Teal" />
  </a>
  <a href="#" style="background-color:#DA7E33;" class="">
    <img src="space.gif" class="colorbox" alt="Orange" />
  </a>
  <a href="#" style="background-color:#198541;" class="">
    <img src="space.gif" class="colorbox" alt="Green" />
  </a>
</span>

I start with a space of id colorselections. Inside it are lots of anchor tags leading to nowhere (#), styled with a background color. And each one calls a space.gif (I dusted off a spacer gif I had been saving in a drawer since 1997). It’s a transparent image that lets that background color show through. I can’t remember why I did it this way. But I did.

JavaScript for the color stuff

In English, when someone clicks on a color, take that color and assign it as the color to the preview paragraph, and also give an indication that color was selected by wrapping a border around it.

function updateTextColor(txtcolor) {
	var txt = document.getElementById('previewer');
	txt.style.color = txtcolor;
	return false;
}
 
// this function helps with the orange border around the 'on' color in the list
function clearColorSelections() {
	var colors = document.getElementById("colorselections");
	var choices = colors.getElementsByTagName("a");
	for (var i=0;i < choices.length;i++)
	{
		choices[i].className="";
	}
}
 
function setColor() {
	var colorselection = document.getElementById("colorselections");
	var links = colorselection.getElementsByTagName("a");
	for ( var i=0; i < links.length; i++) {
		links[i].onclick = function() {
		clearColorSelections();
		updateTextColor(this.style.backgroundColor);
		this.className = "on";
		return false;
		}
	}
}
addLoadEvent(setColor);

Starting with the last function, “setColor” loops through all the anchor tags found within the span colorselections, and adds an onclick event. When you click it, it will:

  1. Change all other colors to an ‘off’ state (this is just for styling purposes, since I use the orange border to indicate that a color is selected)
  2. Update the text color with the clicked anchor’s background Color. In CSS, you say “background-color”. In JavaScript, you say “backgroundColor”. No big whoop.
  3. Set the selected color to an ‘on’ state so I can wrap that orange border around it.
  4. return false. That means that I want to ignore href attribute and go nowhere, and for the browser to just ignore the fact that what I just clicked on was a hyperlink tag. If I leave this off, or set it to return true, clicking the color will try to go to “#”, which means top of the current page.

“clearColorSelections” will get ever <a> tag and set its class to nothing. (That way it won’t have the orange border).

“updateTextColor” takes the desired color and attaches it the the inline style for the paragraph previewer.

Summary

If this were a form, I’d need to find a way to pass the color selection. Semantically, I probably should’ve used radio buttons for the color selections, but I didn’t. In my real world scenario, I had some extra javascript that wrote the desired color to a hidden input field.

Knowing how to do this effect, you can see how easy it could be to have instant comment previewing on blogs, or better yet, create those browser-based word-processors and add “bold”, “italic”, and “underline” formatting.