How to simulate the return key in innerHTML?

@pixclinicJul 13.2007

I am stuck with a dead simple problem: how to make line breaks when writing in a DIV with an innerHTML command captured in a text area receiving keystrokes events ?

take a look at this very simple example:

~~[url]~~http://www.pixclinic.com/inner.html[/url]

you will see that inserting a tag doesn’t work as expected (I coded it to insert a $ to better display what is happening: I just don’t get it! my ? is replaced by a space after the next keystroke

Thanks everybody!

to post a comment

JavaScript

@CrazyMerlinJul 13.2007 — #A carriage return is simply [B]"n"[/B]

You need to change your code though as you are only writing it to work in IE, it will not work in FF like that.

[B]event.keyCode[/B] is IE-specific, other browsers use [B]event.which[/B], so you need to include something like a [B]if(document.all)[/B] to detect for IE

@pixclinicauthorJul 13.2007 — #Hi Crazymerlin

Thanks for the cross-browser tip.Let's pretend for now that FF has not been invented yet, and let's make it work for IE :-)

I tried r and n before with no sucess. even works better, as I can see the carriage return during the keystroke on return. but nothig happens in this case. Could you please look at my link and let me know what I'm doing wrong?

I will work on the FF compatibily when I'm sure I can do it in one browser first

Thanks

@steveaJul 13.2007 — #Here is a cross-browser friendly way of accomplishing what you're looking for.

It's going to cause a bit of a performance hit because it's creating new DOM textNodes for every line but it was the firs thing out of my head.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;HTML&gt;
 &lt;HEAD&gt;
 &lt;TITLE&gt;Test Page&lt;/TITLE&gt;
 &lt;style type="text/css"&gt;
 #displayText { width: 300px; height: 100px; background: #eee; overflow: auto }
 
 <i>	</i>&lt;/style&gt;
 <i>	</i>&lt;script type="text/javascript"&gt;
 <i>	</i>	function placeText(){
 <i>	</i>		var div = document.getElementById('displayText');
 <i>	</i>		var txtbox = document.getElementById('typeHere');
 <i>	</i>		var typed = new String(txtbox.value);
 <i>	</i>		typed = typed.split('n');
 <i>	</i>		while(div.childNodes.length &gt; 0){ div.removeChild(div.childNodes[0]); }
 <i>	</i>		for( var i = 0; i&lt;typed.length; i++ ){
 <i>	</i>			div.appendChild(document.createTextNode(typed[i]));
 <i>	</i>			div.appendChild(document.createElement('BR'));
 <i>	</i>		}
 <i>	</i>	}
 <i>	</i>&lt;/script&gt;
 &lt;/HEAD&gt;
 &lt;BODY&gt;
 &lt;textarea id="typeHere" cols="40" rows="6" onkeyup="placeText();" onfocus="this.value=this.value=='Begin typing here'?'':this.value;"&gt;Begin typing here&lt;/textarea&gt;
 &lt;div id="displayText"&gt;&lt;/div&gt;
 &lt;/BODY&gt;
 &lt;/HTML&gt;

Cheers.

@pixclinicauthorJul 13.2007 — #Hi Stevea

this one rocks :-)

I just found a quicker solution, neither using keystroke events nor nodes:

$text = $text.replace(/n/g,' ');

that was dead simple :-)

How to simulate the return key in innerHTML?

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to simulate the return key in innerHTML?

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴