0

Hi... got a problem with this snippet...

function writeColum () {
	var x = document.getElementById("wc").value;
	var y = document.getElementById("title").value;
	if (event.keyCode == 32) {
            x=x+" ";
	}
	if (event.keyCode == 13) { 
	    x=x+"<br />";
	}
	    document.getElementById("passValue").innerHTML=x;
}

Any reasons why it's not working?

3
Contributors
7
Replies
8
Views
6 Years
Discussion Span
Last Post by Troy III
0

It's called by OnKeyUp.
<textarea name="xx" id="wc" onkeyup="writeColum();"> </textarea>


preview:

<p id="passValue"></p>

The writing shows succesfully, but when I try one of the events, it does not work that well..

Edited by Infame: n/a

0

Infame,

The HTML event interface doesn't give access to the event itself. You have to attach the listener in javascript giving something like this :

<textarea name="xx" id="wc"></textarea>
onload = function() {
	var wc = document.getElementById('wc');
	var title = document.getElementById("title");
	var passValue = document.getElementById("passValue");
	var passValue2 = document.getElementById("passValue2");
	wc.onkeyup = function(e) {
		e = e || window.event;//cross browser access to the event object
		var x = this.value;
		var y = title.value;
		switch(e.keyCode) {
			case 32: x = x + "&nbsp;"; break;
			case 13: x = x + "<br />"; break;
			//other cases here as required
		}
		passValue.innerHTML = x;
	};
};

But you will find that that approach doesn't work for another reason - namely that on each keyup, only the just-entered character is converted - any line feed or space other than the one just entered is not converted on subsequent occasions.

The problem is partialy overcome like this :

onload = function() {
	var wc = document.getElementById('wc');
	var title = document.getElementById("title");
	var passValue = document.getElementById("passValue");
	var passValue2 = document.getElementById("passValue2");
	wc.onkeyup = function(e) {
		e = e || window.event;//cross browser access to the event object
		var x = this.value;
		var y = title.value;
		switch(e.keyCode) {
			case 32: x = "&nbsp;"; break;
			case 13: x = "<br />"; break;
			//other cases here as required
			default: x = String.fromCharCode(e.keyCode);
		}
		passValue.innerHTML += x;
	};
};

But try inserting or deleting a character.

It's much easier on each keyup to pass the entire string through regular expression(s) to convert all spaces and all line feeds to their HTML equivalents. There's no need to read e.keyCode, hence no need to access the event.

onload = function() {
	var wc = document.getElementById('wc');
	var title = document.getElementById("title");
	var passValue = document.getElementById("passValue");
	wc.onkeyup = function(){
		var x = this.value.replace(/ /g, '&nbsp;').replace(/\n/g,'<br/>');
		var y = title.value;
		passValue.innerHTML = x;
	};
};

This converts all spaces and line feeds and automatically handles character insertions and deletions.

Airshow

Edited by Airshow: n/a

0

Whoa! Thanks Airshow, I'll look into it tomorrow morning!

Edit: Just had to test it out, even though it's freaking late!
The last code block that you provided worked perfectly. The others had a few problemes...

Anyways, Thank you! Javascript is pretty much unkown to me... need to read up more on it ;p.
Have a good night! :D

Edited by Infame: n/a

0

Hi. I was wondering about something. The code is great for writing in ordinary text. But when using <pre class="brush: js;"> code here </pre> it kinda messes it up, since all the original newlines has been converted into the HTML eqvivalent \n- <br />...

Is there a work around for this?

0

Hi. I was wondering about something. The code is great for writing in ordinary text. But when using <pre class="brush: js;"> code here </pre> it kinda messes it up, since all the original newlines has been converted into the HTML eqvivalent \n- <br />...

Is there a work around for this?

Yes.
When using the <pre> tag, you need to bypass the conversion script altogether.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.