User Input Spacing

earthlingzed

What is the best way to ensure that when a user types content into a form and includes a double line break (equivelent of a <p>) that it gets converted and stored correctly so when it is shown in a form again for editing (say editing a news article or something) it shows with the correct spacing, not just a huge block of text?

stolzyboy

if you type it into a textarea, and then store it in a db, it will store it fine, then when pulling it back into a textarea, it will show up like you typed with breaks in it

now, if you want what they type to be displayed on a page NOT in a textarea, you need to have a look at [man]nl2br[/man]

earthlingzed

Thanks. That is helpful.

I looked at Ying's article on building a fuction to translate user input formatting and preventing malicious input.
Does anyone have advice on finding basic javascript examples for creating a button system (much link what is in this forum) for inserting things like into a form element?

stolzyboy

bbcode.php

<html>
<head>
<title>BB CODE</title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<FORM METHOD=POST ACTION="message.php" NAME="compose" enctype="multipart/form-data">
<input type="button" class="forms" accesskey="b" name="addbbcode0" value="B" style="font-weight:bold; width: 30px" onClick="bbstyle(0)" >
<input type="button" class="forms" accesskey="i" name="addbbcode2" value="i" style="font-style:italic; width: 30px" onClick="bbstyle(2)">
<input type="button" class="forms" accesskey="u" name="addbbcode4" value="u" style="text-decoration: underline; width: 30px" onClick="bbstyle(4)">
<input type="button" class="forms" accesskey="f" name="addbbcode6" value="Font" style="width: 50px" onClick="bbstyle(6)">
<input type="button" class="forms" accesskey="s" name="addbbcode8" value="Body" onClick="bbstyle(8)">
<input type="button" class="forms" accesskey="l" name="addbbcode10" value="Table" style="width: 40px" onClick="bbstyle(10)">
<input type="button" class="forms" accesskey="t" name="addbbcode12" value="Title" style="width: 40px" onClick="bbstyle(12)">
<input type="button" class="forms" accesskey="i" name="addbbcode14" value="Img" style="width: 40px"  onClick="bbstyle(14)">
<input type="button" class="forms" accesskey="l" name="addbbcode16" value="Link" style="text-decoration: underline; width: 40px" onClick="bbstyle(16)">
<input type="button" class="forms" accesskey="x" name="close" value="Close Tags" style="font-weight: bold;" onClick="bbstyle(-1)"><br><br>
<TEXTAREA NAME="body" class=forms cols=85 rows=20></TEXTAREA>
</FORM>
</BODY>
</HTML>

js.js

// Startup variables
var imageTag = false;
var theSelection = false;

// Check for Browser & Platform for PC & IE specific bits
// More details from: [url]http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html[/url]
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version

var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav  = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));

var is_win   = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac    = (clientPC.indexOf("mac")!=-1);

// Define the bbCode tags
bbcode = new Array();
bbtags = new Array('<B>','</B>','<I>','</I>','<U>','</U>','<FONT SIZE=2 FACE="Verdana" COLOR="black">','</FONT>','<BODY BGCOLOR="','">','<TABLE>\n <TR>\n  <TD>','</TD>\n </TR>\n</TABLE>','<TITLE>','</TITLE>','<IMG SRC="','" ALT="" BORDER=0>','<A HREF="">','</A>');
imageTag = false;

// Replacement for arrayname.length property
function getarraysize(thearray) {
	for (i = 0; i < thearray.length; i++) {
		if ((thearray[i] == "undefined") || (thearray[i] == "") || (thearray[i] == null))
			return i;
		}
	return thearray.length;
}

// Replacement for arrayname.push(value) not implemented in IE until version 5.5
// Appends element to the array
function arraypush(thearray,value) {
	thearray[ getarraysize(thearray) ] = value;
}

// Replacement for arrayname.pop() not implemented in IE until version 5.5
// Removes and returns the last element of an array
function arraypop(thearray) {
	thearraysize = getarraysize(thearray);
	retval = thearray[thearraysize - 1];
	delete thearray[thearraysize - 1];
	return retval;
}

function bbstyle(bbnumber) {

donotinsert = false;
theSelection = false;
bblast = 0;

if (bbnumber == -1) { // Close all open tags & default button names
	while (bbcode[0]) {
		butnumber = arraypop(bbcode) - 1;
		document.compose.body.value += bbtags[butnumber + 1];
		buttext = eval('document.compose.addbbcode' + butnumber + '.value');
		eval('document.compose.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
	}
	imageTag = false; // All tags are closed including image tags :D
	document.compose.body.focus();
	return;
}

if ((clientVer >= 4) && is_ie && is_win)
	theSelection = document.selection.createRange().text; // Get text selection

if (theSelection) {
	// Add tags around selection
	document.selection.createRange().text = bbtags[bbnumber] + theSelection + bbtags[bbnumber+1];
	document.compose.body.focus();
	theSelection = '';
	return;
}

// Find last occurance of an open tag the same as the one just clicked
for (i = 0; i < bbcode.length; i++) {
	if (bbcode[i] == bbnumber+1) {
		bblast = i;
		donotinsert = true;
	}
}

if (donotinsert) {		// Close all open tags up to the one just clicked & default button names
	while (bbcode[bblast]) {
			butnumber = arraypop(bbcode) - 1;
			document.compose.body.value += bbtags[butnumber + 1];
			buttext = eval('document.compose.addbbcode' + butnumber + '.value');
			eval('document.compose.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
			imageTag = false;
		}
		document.compose.body.focus();
		return;
} else { // Open tags

	if (imageTag && (bbnumber != 14)) {		// Close image tag before adding another
		document.compose.body.value += bbtags[15];
		lastValue = arraypop(bbcode) - 1;	// Remove the close image tag from the list
		document.compose.addbbcode14.value = "Img";	// Return button back to normal state
		imageTag = false;
	}

	// Open tag
	document.compose.body.value += bbtags[bbnumber];
	if ((bbnumber == 14) && (imageTag == false)) imageTag = 1; // Check to stop additional tags after an unclosed image tag
	arraypush(bbcode,bbnumber+1);
	eval('document.compose.addbbcode'+bbnumber+'.value += "*"');
	document.compose.body.focus();
	return;
}
storeCaret(document.compose.body);
}

function storeCaret(textEl) {
	if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}
//-->

earthlingzed

That is amazingly helpoful! many thanks!!