How do you display text on a web page that has been typed into a text box?

Question

landroverthing 0 Newbie Poster

14 Years Ago

I want to try to create a section on my website, where someone can type a word into a text box, this will then be displayed on the same page, under the box, in a font that is chosen by the user by selecting a text box next to the font name?

Can anyone help, you can sort of see an example of this on fonts.com

I look forward to your replies

web-design

3 Contributors
8 Replies
138 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by c9921

All 8 Replies

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Something like this maybe ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#f1 p { margin:0; }
#styledTxt { width:300px; margin:12px 0; padding:10px; border:1px solid #999; line-height:20px; }
</style>

<script>
var  TEXTBOX = function(){//Namespace wrapper
	//Private members
	var fonts=[], el_1, el_2, font = 'arial';
	var go = function(ips){
		var i;
		for(i=0; i<ips.length; i++){
			if(ips[i].name=="font" && ips[i].checked){
				el_2.style.fontFamily = font = ips[i].value;
			}
		}
		if(el_1 && el_2){
			txt = document.createTextNode(el_1.value);
			oldTxt = el_2.firstChild;
			if(oldTxt) el_2.replaceChild(txt, oldTxt);
			else el_2.appendChild(txt);
		}
	};
	//Privileged public members
	return {
		go : function(){ go(fonts); },
		init : function(){
			el_1 = document.getElementById('txt');
			el_2 = document.getElementById('styledTxt');
			el_1.onblur = function(){ go(ips) };
			ips = document.getElementsByTagName('input');
			for(i=0; i<ips.length; i++){
				if(ips[i].name=="font"){
					ips[i].onclick = function(){ go(fonts); };
					fonts.push(ips[i]);
				}
			}
			go(fonts);
		}
	};
}();

onload = function(){
	TEXTBOX.init();
}
</script>
</head>

<body>

<form id="f1" name="f1">
<input name="txt" value="Hello World!">
<p><input type="radio" id="font1" name="font" value="arial" checked="checked"><label for="font1">Arial</label></p>
<p><input type="radio" id="font2" name="font" value="times"><label for="font2">Times</label></p>
<p><input type="radio" id="font3" name="font" value="verdana"><label for="font3">Verdana</label></p>
</form>
<div id="styledTxt"></div>

</body>
</html>

Airshow

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Landroverthing,
(I'd like a tidy Series I swb 88 myself but that's another story)

My fault. I wrote that in a hurry and had only tested in IE and not FF, which I expect you are using (or Opera). Try this version, which I have tested in IE, FF and Opera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#f1 p { margin:0; }
#styledTxt { width:300px; margin:12px 0; padding:10px; border:1px solid #999; line-height:25px; }
</style>

<script>
var  TEXTBOX = function(){//Namespace wrapper
	//Private members
	var fonts=[], el_1, el_2;
	var go = function(){
		var i;
		for(i=0; i<fonts.length; i++){
			if(fonts[i].name=="font" && fonts[i].checked){
				el_2.style.fontFamily = fonts[i].value;
			}
		}
		if(el_1 && el_2){
			el_2.innerHTML = (el_1.value=='') ? '&nbsp;' : el_1.value;
		}
	};
	//Privileged (public) members
	return {
		init : function(){
			el_1 = document.getElementById('txt');
			el_2 = document.getElementById('styledTxt');
			el_1.onblur = function(){ go() };
			var ips = document.getElementsByTagName('input');
			for(i=0; i<ips.length; i++){
				if(ips[i].name=="font"){
					ips[i].onclick = function(){ go(); };
					fonts.push(ips[i]);
				}
			}
			go();
		}
	};
}();

onload = function(){
	TEXTBOX.init();
}
</script>
</head>

<body>

<form id="f1" name="f1">
<input id="txt" value="Hello World!">
<p><input type="radio" id="font1" name="font" value="arial" checked="checked"><label for="font1" style="font-family:arial;">Arial</label></p>
<p><input type="radio" id="font2" name="font" value="times"><label for="font2" style="font-family:times;">Times</label></p>
<p><input type="radio" id="font3" name="font" value="verdana"><label for="font3" style="font-family:verdana;">Verdana</label></p>
</form>
<div id="styledTxt"></div>

</body>
</html>

I have also tidied up the code and now show each font option in its own font face.

You could have a "Go" button but the event handlers already in place should do the job. You should see a change in the "styledTxt" box when the "txt" input field loses focus and/or when any of the radio buttons is clicked to change font.

If you look at the TEXTBOX.init method, you will see that handlers are attached to el_1.onblur and each of the radio buttons' onclick events. In each case, the go() method is called. This is what makes it work. I developed with a "Go" button but deleted it when I attached the other event handlers and found they provided adequate control.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

landroverthing 0 Newbie Poster · Answer 1 · 2009-11-19T19:18:32+00:00

Something like this maybe ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#f1 p { margin:0; }
#styledTxt { width:300px; margin:12px 0; padding:10px; border:1px solid #999; line-height:20px; }
</style>

<script>
var  TEXTBOX = function(){//Namespace wrapper
	//Private members
	var fonts=[], el_1, el_2, font = 'arial';
	var go = function(ips){
		var i;
		for(i=0; i<ips.length; i++){
			if(ips[i].name=="font" && ips[i].checked){
				el_2.style.fontFamily = font = ips[i].value;
			}
		}
		if(el_1 && el_2){
			txt = document.createTextNode(el_1.value);
			oldTxt = el_2.firstChild;
			if(oldTxt) el_2.replaceChild(txt, oldTxt);
			else el_2.appendChild(txt);
		}
	};
	//Privileged public members
	return {
		go : function(){ go(fonts); },
		init : function(){
			el_1 = document.getElementById('txt');
			el_2 = document.getElementById('styledTxt');
			el_1.onblur = function(){ go(ips) };
			ips = document.getElementsByTagName('input');
			for(i=0; i<ips.length; i++){
				if(ips[i].name=="font"){
					ips[i].onclick = function(){ go(fonts); };
					fonts.push(ips[i]);
				}
			}
			go(fonts);
		}
	};
}();

onload = function(){
	TEXTBOX.init();
}
</script>
</head>

<body>

<form id="f1" name="f1">
<input name="txt" value="Hello World!">
<p><input type="radio" id="font1" name="font" value="arial" checked="checked"><label for="font1">Arial</label></p>
<p><input type="radio" id="font2" name="font" value="times"><label for="font2">Times</label></p>
<p><input type="radio" id="font3" name="font" value="verdana"><label for="font3">Verdana</label></p>
</form>
<div id="styledTxt"></div>

</body>
</html>

Airshow

Hi Airshow,

Thanks for the reply, and it is looking like it is going in the right direction, but please don't laugh, as I am not that great at this, but when I tried your code, is there meant to be a button next to the text box to submit your entered word?

At the moment it just says 'hello world' and I cant get the second text box to do anything?

It is probably me!

landroverthing 0 Newbie Poster · Answer 2 · 2009-11-20T01:27:38+00:00

YOU ARE A GENIUS!

That is bordering on perfect, the only glitch at the moment though and hence I said about the button, is that your instinct as a user is to type something in the textbox, then press the return key, which automatically repopulates the box with Hello World

So is that an easy fix?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-11-20T01:57:20+00:00

Landroverthing,

Agreed it would better like that, and it's very easy to program.

In TEXTBOX.init, you need to add yet another event handler to call go() . Insert the following immediately above the line that reads go() :

document.f1.onsubmit = function(){
				go();
				return false;
			}

Note how this function returns false , otherwise the form would submit, the page would refresh and the effect you seek would be lost. Try commenting out return false and see what happens.

Airshow

landroverthing 0 Newbie Poster · Answer 4 · 2009-11-20T02:18:39+00:00

Thanks Airshow,

That is perfect! give yourself a huge pat on the back!

Sadly I don't have anything as classic as a series 1, just an E reg 90 with a TD5 lump running veg oil, at least I'm helping the planet!

If there is anything I can do in return, just ask!

Don't know if you are married etc, but if you fancy visiting my wife's website at www.camelandyak.co.uk, I can send you a gift at trade price, maybe a xmas present for your mum!

Thank you so so much.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2009-11-20T23:32:12+00:00

Landroverthing,

Here's a version with a character count. It also includes whitespace to non-breaking space conversion such that the styled version matches the original text even when the user has entered multiple spaces. Without the character count this aspect wasn't really an issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#f1 p { margin:0; }
#styledTxt { width:300px; margin:12px 0 2px 0; padding:10px; border:1px solid #999; line-height:25px; }
#txtLength { font-size:9pt; }

</style>
<script>
var  TEXTBOX = function(){//Namespace wrapper
	//Private members
	var fonts=[], el_1, el_2, el_3;
	var go = function(){
		var i;
		for(i=0; i<fonts.length; i++){
			if(fonts[i].name=="font" && fonts[i].checked){
				el_2.style.fontFamily = fonts[i].value;
			}
		}
		if(el_1 && el_2){
			var pattern = /\s/g;//RegExp for single whitespace (global)
			var t = el_1.value.replace(pattern, '&nbsp;');//replace all single whitespace characters with non-breaking spaces.
			el_2.innerHTML = (t==='') ? '&nbsp;' : t;
			if(el_3){ el_3.innerHTML = el_1.value.length + ' characters (including spaces)'; }
		}
	};
	//Privileged (public) members
	return {
		init : function(){
			var i;
			el_1 = document.getElementById('txt');
			el_2 = document.getElementById('styledTxt');
			el_3 = document.getElementById('txtLength');
			el_1.onblur = function(){ go(); };
			var ips = document.getElementsByTagName('input');
			for(i=0; i<ips.length; i++){
				if(ips[i].name=="font"){
					ips[i].onclick = function(){ go(); };
					fonts.push(ips[i]);
				}
			}
			document.f1.onsubmit = function(){
				go();
				return false;
			};
			go();
		}
	};
}();

onload = function(){ TEXTBOX.init(); };
</script>
</head>

<body>

<form id="f1" name="f1">
<input id="txt" value="Hello World!">
<p><input type="radio" id="font1" name="font" value="arial" checked="checked"><label for="font1" style="font-family:arial;">Arial</label></p>
<p><input type="radio" id="font2" name="font" value="courier"><label for="font2" style="font-family:courier;">Courier</label></p>
<p><input type="radio" id="font3" name="font" value="times"><label for="font3" style="font-family:times;">Times</label></p>
<p><input type="radio" id="font4" name="font" value="verdana"><label for="font4" style="font-family:verdana;">Verdana</label></p>
</form>
<div id="styledTxt"></div>
<div id="txtLength"></div>

</body>
</html>

Airshow

c9921 0 Newbie Poster · Answer 6 · 2009-11-21T07:44:41+00:00

Air show I see you are really good with custom code how would I write a code to show what a user types into a validation text field on one of my forms as a magnified or larger version above the text box? To give you an example I have a validation text box that is partially blocked by an image(on purpose) but users can still click inside and start typing , but bc of the image they cant see what is being typed into the box to make sure its correct. So I need a solution to have whats being typed show up magnified or in a pop up bubble but only when they are inside the box typing.

How do you display text on a web page that has been typed into a text box?

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers