dougv.com « Doug Vanderweide

Fun With JavaScript: Comparing A Text Box's Contents To The Contents Of A Div

Asked recently on Yahoo! Answers:

Hi..plzzzz can anybody tell me how can i change a char color in a string entered in a textbox in javascript??
i’m a begginer in javascript,,and i’m working on a project..i want the user to insert a text that matches a specific text in the web page..if any character doesn’t match the character required,,it will be colored as red for example..it’s really important to me coz i need to finish this project the next few days..thank u

The short answer is, you can’t change individual letter’s color in a textbox; you can only change the color of all the text in a textbox.

You can change individual text color in a DIV, however, and display that in the vicinity of the textbox.

Here’s a quick and dirty version of what you are after. First, we need a div that holds the correct text, a textbox into which the user will type, a button to check the input and an output div that compares the two:

Please copy this string in the box below:
The Eiffel Tower is in Paris.


 


Here is the string you typed; wrong/missing letters are in red, right ones are in green:

We also need to declare two CSS styles, .right and .wrong, which will be applied to the div characters:

.wrong {
	color: #f00;
}
.right {
	color: #060;
}

Notice that we have assigned an onclick event handler named checkString(). That JavaScript function will:

• Get the contents of the div containing the correct text, and the text box containing the string the user typed, and a div for output.
• Go through the text of the div character by character, comparing it to the text entered by the user.
• If the character typed by the user matches the character in the div, then the div character’s color is set to the .right style; if it does not match, it is set to the .wrong style.
• Assign to the output div the result string constructed above

function checkString() {
	var i;
	var x;
	var outputString = "";

	var correctString = document.getElementById('theString').innerHTML;
	var checkThis = document.getElementById('mytext').value;
	var outputDiv = document.getElementById('myString');

	for(i = 0; i < checkThis.length; i++) {
		if(correctString.charAt(i) == checkThis.charAt(i)) {
			outputString += '' + checkThis.charAt(i) + '';
		}
		else {
			outputString += '' + checkThis.charAt(i) + '';
		}
	}

	if(checkThis.length < correctString.length) {
		i = checkThis.length;
		x = correctString.length - 1;
		outputString += '' + correctString.substr(i, x) + '';
	}

	outputDiv.innerHTML = outputString;
}

It doesn’t work quite right if the user enters extra characters, but it accomplishes most of what you want.

You can see this in action here: http://www.dougv.com/demo/js_check_text/. I distribute all code under the GNU GPL 3.